Distribución flexible

display: flex convierte los hijos directos en elementos flexibles. flex-direction elige fila o columna; justify-content controla el eje principal y align-items el cruzado.

Usa gap para separar elementos y flex-wrap cuando puedan necesitar otra línea. En un hijo, flex: 1 1 220px permite crecer, reducirse y partir de una base aproximada de 220px.

Flexbox

.actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}