Как с помощью FLEXBOX сделать по центру по вертикали блоки, НО одинаковой высоты?

Question

[Cheizer]

Друзья, памагитиии!! :))
Вроде простая задача, но не могу догнать как решить.

Как на flexbox выровнять по вертикали по центру блоки, но сделать их одновременно одинаковой высоты, это нужно для того что бы рисунок в одном из блоков прижать к верху. Не получается никак.
Вот на codepin верстку сделал пример как сейчас https://codepen.io/Cheizer/pen/BYNOJv

И вот скрины как сейчас



и как хочется



Как так сделать?

Answer 1

[kreoTech]

Можно сделать вот так

Comments

[Cheizer]

Спасибо большое, я тут тоже сейчас копаюсь, вложил блоки, тоже что то такое же получилось, НО если добавить еще пару абзацев текста, получается какая то Ж опять. Верхняя часть контента невидна. Попробуйте скопируйте два раза абзац текста. Почему так получается? У меня так же. :(

[kreoTech]

Роман Кузнецов, Поправил: https://jsfiddle.net/kreoTech/m7tjL25z/5/

[Cheizer]

Благодарю!

Answer 2

[tyzberd]

https://codepen.io/anon/pen/rJVoYx/

Comments

[Cheizer]

Благодарю!

Answer 3

[Егор Лавренов]

.flex-container{
align-items: flex-start;
}
Вот почитайте Подробное руководство по флексам

Comments

[Cheizer]

Благодарю!