CSS Flexbox Layout

Flexbox is the modern way to lay out a group of elements. Set display: flex on a container and its children line up in a row. gap adds space between them, justify-content aligns them along the row, and align-items aligns them across it.

.row {
  display: flex;
  gap: 12px;
  justify-content: center;
}

Try changing justify-content to space-between or flex-end, or set flex-direction: column to stack them.