Как разместить две кнопки по краям панели двумя правилами?

Условие

Разметка: <div class="toolbar"><button>Назад</button><button>Далее</button></div>. Панель шире суммы кнопок, должна иметь высоту не менее 48px. Кнопки выравниваются вертикально по центру, первая слева, вторая справа. Напишите не более двух CSS-правил.

Ответ

Достаточно одного правила для toolbar: display:flex, align-items:center, justify-content:space-between и min-height:48px. Кнопки сохранят свои собственные размеры.

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  gap: 12px;
}

Space-between распределяет свободное пространство между двумя элементами, а не добавляет внешний отступ по краям. Если панель станет уже суммарной ширины кнопок, потребуется отдельное правило переноса или адаптивного поведения; условие достаточной ширины здесь задано явно.