How can two round buttons be displayed per line and a single one above it centered without spacing to the lower two and vice versa?

Question

How can the buttons on the left side be displayed as on the right? The individual groups are separated with padding and are displayed 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>

Answer 1

There are many ways of doing this, here is a simple way of doing it without changing the html

EDIT: since your circles won't touch borders normally, you will need to manually push them towards their destination

.group {
  float: left;
  padding: 7px 0px 7px 0px;
  clear: both;
}

span {
  display: flex;
  text-align: center;
  justify-content: center
}

button.a {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #8B8B8B;
}
.move-up {
  margin-top: -3px;
}

<div class="group"><span>
      <button class="a"></button>
    </span><span class="move-up">
      <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 move-up"></button>
    </span>
</div>