Альтернатива CSS этому коду CSS-jQuery?

У меня есть два столбца рядом, которые являются различными цветами. Фон имеет уникальный цвет также. Правый столбец содержит текст, который расширится до неизвестной высоты. Другой столбец содержит мало ни к чему.

<div id="container">
    <div id="leftColumn">
        <p>Only one small paragraph here</p>
    </div>

    <div id="rightColumn">
        <p>Many large paragraphs inside here.</p>
    </div>
</div>

Я хотел бы, чтобы левый столбец был точной высотой как правым столбцом.

Вот CSS...

#leftColumn {
    display:inline-block;
    width: 200px;
}
#rightColumn {
    display:inline-block;
    width: 600px;
    vertical-align: top;
}

Таким образом, когда страница загружается, я использую jQuery для установки высоты левого столбца на основе высоты правого столбца.

$(document).ready(function() {
    $('#leftColumn').css('height', $('#rightColumn').innerHeight());
});

Существует ли способ сделать это только с CSS?