Два плавающих элемента div, которые сохраняют одинаковую высоту и имеют вертикально выровненное содержимое. ⇐ CSS

[Anonymous]

У меня есть два плавающих элемента div рядом. Тот, что справа, имеет высоту, которая может варьироваться в зависимости от содержимого.
Я пытаюсь заставить левый div расти вместе с правым div, а также получить содержимое левый элемент div будет центрирован по вертикали.
Вот мой jsfiddle.
CSS:

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

.container {
border: 1px solid black;
}
.floatFirst {
float: left;
border : 1px solid red;
}
.floatSecond {
float: left;
border : 1px solid blue;
}
.divToBeVerticallyCentered {
border: 1px solid green;
position: relative;
top: 50%;
transform: translateY(-50%);
}

HTML:

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

this should be vertically centered

this is some text
this is some text
this is some text
this is some text
this is some text
this is some text
this is some text

Any help would be appreciated.


Источник: https://stackoverflow.com/questions/282 ... ed-content