Как выровнять заголовки и текст в разных flex-item'ах?

Question

[Gortyser]

На данный момент есть такая вот штука: codepen.
Необходимо, чтобы все было выровнено по заголовкам, примерно так:

пример

Вариант с фиксированной высотой для заголовка, конечно, прокатит, но делать так все-таки не хочется по понятных причинам.
Был еще вариант не разбивать все это дело на 3 разных item'а, и это, опять же, сработает, но тогда уже появятся проблемы на маленьких разрешениях. Которые, в свою очередь, можно будет обойти с помощью order, но это какой-то совсем уж кривой вариант.
Собственно, с помощью чего такое выравнивание можно реализовать?

Comments

[sergey_from_saratov]

Собственно, с помощью чего такое выравнивание можно реализовать?

С помощью JavaScript.

[Gortyser]

В принципе, сделал, спасибо.
Просто думал о реализации на css без js.

[sergey_from_saratov]

Gortyser, сделал так покажи. Людям интересно.

[Gortyser]

Ссылка та же осталась.
Решение

[Александр Цымбал]

Да, согласен, такое только на JavaScript.
На CSS только с помощью фиксированной высоты или display: table, который по мере сужения переводить к display: block (или тот же flex). Ну, это всё как-то костыльно. Вообще, дизайнера надо поругать за такой макет ))))

Answer 1

[display: block]

display: table

Comments

[Gortyser]

Была такая мысль, но на маленьких экранах такое не пройдет.

[display: block]

Gortyser, на маленьких экранах display: block