Как сделать колонки одинаковой высоты в CSS?

Сейчас это решается одной строкой, потому что и flexbox, и grid по умолчанию растягивают элементы по высоте самого высокого.

Через flexbox:

.row {
  display: flex;
  gap: 16px;
}
.col { flex: 1; } /* равная ширина */

<div class="row">
  <div class="col">Мало текста</div>
  <div class="col">Очень много текста, в несколько строк, длинный абзац...</div>
  <div class="col">Средне</div>
</div>

Все три колонки автоматически станут одинаковой высоты — за это отвечает значение align-items: stretch, которое стоит по умолчанию. Вам ничего дополнительно делать не нужно.

Важно: если вы где-то прописали align-items: center или flex-start, растягивание отключится и колонки снова станут разной высоты. Уберите это переопределение.

Через grid — то же самое автоматически:

.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

Ячейки одной строки грида всегда равны по высоте. Старые приёмы с table или огромными паддингами больше не нужны.