How to adaptively align content in blocks of the same height?

Question

css

Hello. There are two blocks of the same height, but I can't figure out how to make a "space" equal to the height of the content of the first block just after the p tag, that is, in fact, I just need to nail the button at the bottom, taking into account the indents inside the block, but adaptability is a problem. Help solve

Answer 1

https://jsfiddle.net/7sxftanL/9/

Answer 2

The button must be a flex item, margin-top: auto;so set it to the button will be pushed from above to the available height. The blocks will be the same height, provided that the alignment (along the transverse axis) of the flex container is stretch.

Answer 3

container

display: flex;
flex-direction: column;

button: example