just add display:block;
and remove float:left;
check the snippet
.dynamic-key-button {
display:block;
height: 20px;
width: 20px;
border-radius: 10px;
border: solid;
cursor: pointer;
padding-bottom: 12px;
transition-duration: 0.4s;
margin-left: 9px;
}
<form class="my-form" id="atlas-info">
<div id="property-header">Atlas Settings</div>
<hr />
<div class="form-group" id="tag-entry">
<label>Select tagging group: </label>
<br />
<input type="text" name="name" id="tree">
</div>
<div class="input-group">Dynamic key: </div>
<button type="button" class="dynamic-key-button" id="filter-setting"></button>
<label class="dynamic-key-text">Show if / show if not</label>
<br /> @*below should not be hard coded, needs to be a loop of some sort*@
<button type="button" class="dynamic-key-button" id="organisation"></button>
<label class="dynamic-key-text">Organisation</label>
<br />
<button type="button" class="dynamic-key-button" id="job-executor"></button>
<label class="dynamic-key-text">Job executor</label>
<br />
<button type="button" class="dynamic-key-button" id="job-step"></button>
<label class="dynamic-key-text">Job step</label>
<br />
<button type="button" class="dynamic-key-button" id="product"></button>
<label class="dynamic-key-text">Product</label>
<br />
</form>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…