https://i.sstatic.net/oOwY6.png
Is it possible to align the buttons on the left side like they appear on the right? Each group should have padding and display with flow-root.
.group {
display: flow-root;
padding: 7px 0px 7px 0px;
}
button.a {
float: left;
width: 18px;
height: 18px;
border-radius: 50%;
border: 1px solid #8B8B8B;
}<div class="group"><span>
<button class="a"></button>
</span><span>
<button class="a"></button>
<button class="a"></button>
</span><span>
<button class="a"></button>
<button class="a"></button>
</span>
</div>
<div class="group"><span>
<button class="a"></button>
<button class="a"></button>
</span><span>
<button class="a"></button>
</span>
</div>