CSS: два плавающих столбца div с одинаковой высотой, с вертикальным разделением правого div

Я пытаюсь создать макет, подобный приведенному ниже:

Два float: левые div расположены рядом, каждый с 45 % ширины. Справа блок div содержит два подраздела - один выровнен по низу блока, а другой по верху.

Если разделы справа станут достаточно длинными, они, конечно, встретятся посередине, а затем начнут нажимать вне высоты содержащего div:

Я играл с фальшивыми колонками, clear: all, overflow: hidden, bottom: 0 и любые другие уловки, которые я мог придумать, но я не могу заставить это поведение работать.

Настоящая проблема, похоже, проистекает из того, что меньший из левого и правого div не расширяется до высоты контейнера, который принимает высоту большего из двух, используя overflow: hidden. Есть мысли?

Что у меня есть на данный момент:

<div style="overflow:hidden; clear:both">
    <div id="column1" style="float: left; width:45%">
    <div id="column2" style="float: left; width:45%">
        <div style="float: left; top: 0">Content Here should sit up top</div>
        <div style="float: left; bottom: 0">Content Here should sit on bottom</div>
    </div>
</div>

Вот как получается, я не могу разделить верх и низ, не используя где-то фиксированную высоту:

Спасибо, что посмотрели, ребята!