HTML + CSS -взаимное изменение размеров div-ов. Как реализовать?

Некоторое время назад начал обучаться web-дизайну, в частности верстке сайтов. Но во время очередной верстки столкнулся с одной проблемой:


Эти два блока должны быть, во-первых, одной высоты, во-вторых, вертикальный размер блоков должен взаимно изменяться, когда парный блок становится больше другого. Иначе говоря, если увеличить кол-во текста в блоке так, что по размерам он станет больше парного, то размер этот парный блок должен стать того же размера, что и переполненный. И выглядеть это должно примерно так:


Возможности строго ограничены ресурсом, на котором сверстанное "чудо" будет блистать (одна из энциклопедий wikia):

• HTML (неполный - только основное форматирование, блоки div и собственные wikia-вские теги. таблицы есть, при чем к ним можно применять стили, но кодить их - весьма муторное дело)
• СSS (чистый)
• JS (но кол-во скриптов, которые можно добавить, ограниченно. как же могут возникнуть проблемы с повсеместным использованием)
• Возможности загружать сторонние файлы (помимо изображений и видео) нет

Вообщем, картина не радует(

Вот код:
HTML

<div class="info">
            
            <div class="statement" align="center" style="float: left">
                <div class="text"> Места спавна </div>
            </div>
            
            <div class="statement" align="center" style="float: right">
                <div class="text"> Военные локации </div>
            </div>
        
            <div class="clr"></div>
                </div>

CSS

.info{
    min-height: 30px;
    width:250px; 
}

.info .statement{
    width: 110px;
    min-height: 100%;
}

И, собственно, сам вопрос - как это можно реализовать?

P.S. Код и скриншот - только часть всего пирога. Конечная верстка представляет из себя инфобокс. Если появится необходимость лицезреть все чудо целиком (включая код), могу это устроить)

P.P.S. Понимаю, что верстка убога, но занимаюсь этим не так уж и много времени.