Flexbox layout

display:flex turns a container's children into a row or column. Justify/align controls spacing.

Code example

.toolbar {
  display: flex;
  gap: 0.5rem;
  align-items: center;      /* vertical center */
  justify-content: flex-start;  /* horizontal */
}
.toolbar .spacer { margin-left: auto; }  /* push right */

How it works

Flexbox is the modern way to lay out rows and columns. Set display:flex on the parent; children become flex items that you can align, distribute, and reorder. align-items controls the cross-axis (vertical for a row); justify-content controls the main axis (horizontal for a row). margin-left:auto on a flex item pushes it and everything after it to the right — the classic 'push to the end' trick. The notebook toolbar uses flex with margin-left:auto on the kernel pill.