Ответ 1
Решение display: table
Внутри таблиц каждая ячейка строки имеет одинаковую высоту.
.wrapper {
display: table;
width: 100%;
}
.left, .right {
display: table-cell;
}
Это лучшее решение, на мой взгляд, но несовместимо перед IE8.
Вот это Fiddle для этого решения.
Использование абсолютного позиционирования
Абсолютные позиционированные элементы уважают своих родственников height:
.wrapper {
position: relative;
padding-left: 85px;
}
.left {
position: absolute;
left: 0;
top: 0;
}
Обычно я бы не предлагал абсолютное позиционирование в большинстве ситуаций. Но так как у вас есть фиксированный width, возможно, это не имеет значения. Но имейте в виду, что это будет игнорировать длинное содержимое в .left. Высота контролируется только .right.
Ниже приведено обновление вашей скрипты.
Решение flex i
Это настолько новое, что я бы не рекомендовал его использовать прямо сейчас, но просто для того, чтобы быть полным. Вы можете использовать CSS3 flex, но имейте в виду совместимость браузера:
.wrapper {
display: flex;
}
Fiddle (протестирован в текущем Chrome и Firefox).
Макет grid
Еще более новый, чем flexbox, CSS grid швы, чтобы быть идеальным ответом на вопросы макета.
.wrapper {
display: grid;
grid-template-areas: 'left right';
}
.left {
grid-area: left;
}
.right {
grid-area: right;
}
Совместимость браузера встречается редко, если вы вернетесь в версии просмотра. К тому же, по моему мнению, это будет излишним для сценария OP, но для более сложных проблем с компоновкой в будущем это очень мощная вещь.
Посмотрите на Fiddle.