Items in a single row

For a one-dimensional layout I usually use Flexbox.

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

With the default row direction, align-items aligns items vertically and justify-content distributes them along the row.

To be precise: if the row must never wrap, I keep nowrap, but then I have to handle overflow. Grid suits layouts where I control both rows and columns better.

Pitfall: positioning items with spaces or fixed margins breaks as soon as the text changes.