Как сделать все элементы div одинаковой высоты в зависимости от текстового содержимого? ⇐ CSS

[Anonymous]

У меня все еще есть давняя проблема. Если быть кратким, на моем сайте есть 3 элемента списка в неупорядоченном списке. В моей демо-версии списки представляют собой зеленые прямоугольники. Каждый элемент списка содержит изображение и 3 элемента div (поле заголовка, поле местоположения, поле цены). Здесь меня интересует только поле заголовка. Мой демонстрационный сайт находится здесь:

Вы можете видеть, что каждое поле заголовка имеет разную длину текста, что снижает местоположение/цену. Я покрасил поле заголовка в серый цвет, чтобы вы могли его видеть. Я хочу, чтобы высота всех полей заголовка соответствовала высоте самого большого поля заголовка. Я приложил скриншот того, что мне нужно.

Вот демонстрационная ссылка в CodePen. Можете ли вы помочь ее настроить?
http://codepen.io/anon/pen/azJKYM

Основной элемент неупорядоченного списка (содержит все 3 зеленых ящика) есть CSS:

Код: Выделить всё

                .list
{
width: 100%;
overflow: hidden;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

Отдельный элемент списка (зеленый прямоугольник) имеет CSS:

Код: Выделить всё

                .list__item
{
width: 32%;
float: left; /* 10 */
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
padding-top: 0.625em;
padding-bottom: 0.825em;
margin-left:1%;
margin-right:0%;
position:relative;
line-height:40px;
}

и в поле заголовка есть CSS:

Код: Выделить всё

.titlebox{
width: 80%;
height: 10%;
display: inline-block;
font-size: 4.2vh;
font-family: Garamond;
color: #002000;
text-align: center;
line-height: 35px;
font-weight:bold;
margin-top: 5%;
margin-right: 10%;
margin-bottom: 5%;
margin-left: 10%;
background-color:grey;

}

Спасибо за любую помощь! Скриншот желаемого результата приведен ниже.




Подробнее здесь: https://stackoverflow.com/questions/279 ... xt-content