Как заставить элементы двух столбиков в FLEX контейнере “растечься” по высоте большего столбика?

Question

[HennesyGregson]

Есть 6 элементов, распределенных в два столбика. По умолчанию, они прилипают друг к другу, но с margin их красиво отделить не получиться - div разной высоты. Поэтому нужно, чтобы их высоты были одинаковы, верхние элементы равнялись между собой, а элементы в меньшей колонке растекались по всей её высоте. К тому же нужно, чтобы на адаптиве можно было разместить всё в один столбик.

Для наглядности прикладываю изображение. Я знаю, что на bootstrap это можно было бы сделать в два счета, но в ТЗ заказывали ванильный css/html.

Как получается:


Как надо:

Answer 1

[L1nks]

А если для класса reason-blocks добавить
align-items: flex-start;
Это не то?

Answer 2

[historydev]

align-items: center;