Как сверстать два адаптивных блока, которые не разваливались бы при изменении ширины экрана?

Question

[ayapergenov]

Пример кода

Есть два адаптивных блока разной ширины. При изменении ширины экрана каждый из них меняет свою высоту в зависимости от внутреннего содержимого. Как сделать блоки одинаковой высоты для адаптивной страницы?

Answer 1

[Сергей delphinpro]

codepen.io/anon/pen/XbNrmN =)

upd
можно так (более кроссбраузерно)
codepen.io/anon/pen/VLmZvX

Answer 2

[Евгений Петров]

display:flex
Есть подводные камни в лице старых IE и Safari.

display:table
Есть подводные камни в лице Firefox и позиционирования в ячейках (если у вас такое есть).

float + :before | :after
Сами блоки (float, inline-block) разной высоты, но оба стоят в контейнере и визуально они одинаковы за счёт позиционируемых псевдоэлементов, в которых и реализован фон.

linear-gradient()
Если фон простой, то реализовать его можно в контейнере, в котором и лежат оба блока (float, inline-block).