How to make the elements of two columns in a FLEX container "spread" to fit the height of the larger column?

Question

Flexbox

There are 6 elements distributed in two columns. By default, they stick to each other, but it’s marginimpossible to separate them beautifully - they are divof different heights. Therefore, it is necessary that their heights are the same, the upper elements are equal to each other, and the elements in the smaller column spread over its entire height. In addition, you need to be able to place everything in one column on the adaptive.

I am attaching an image for clarity. I know that on bootstrap this could be done in a jiffy, but in the TK they ordered vanilla css / html.

How it works:


How it works:

Answer 1

And if for the reason-blocks class add Is this not it?
align-items: flex-start;

Answer 2

align-items: center;