Задача — Головоломка, сложное для верстки выравнивание

Заранее прошу прощения, что пристаю со своими вопросами, но неожиданно для себя я столкнулся с задачей, которую никак не могу реализовать средствами CSS.

Задача: заверстать следующий макет



Сложностью является выравнивание элементов в заголовках. В верхнем заголовке текст блоков (каждый шириной по 50%) выровнен по центру.

Левый край нижнего заголовка должен быть выровнен по левому краю верхнего левого заголовка.

HTML-код я примерно такой набросал:

<div>
    <ul>
        <li><a href="#">текст заголовка</a></li>
        <li><a href="#">текст заголовка</a></li>
    </ul>
</div>
<!-- кусок текста, высоту его вычислить никак нельзя-->
<div>
    <p>
        Полнолуние жизненно отражает центральный афелий , данное соглашение было заключено
    </p>
    <p>
        Засветка неба, следуя пионерской работе Эдвина Хаббла, оценивает эллиптический экватор
    </p>
</div>
<dl>
    <dt><span>длинный текст, выровненный с заголовком</span></dt>
    <dd>
        <!-- кусок текста, высоту его вычислить никак нельзя-->
        Полнолуние жизненно отражает центральный афелий , данное соглашение было заключено
    </dd>
</dl>

Резолюция в форумах и у знакомых была одна: делать через JavaScript. Но мне все-таки хочется верить в мощь CSS и в то, что данную задачу можно выполнить при помощи CSS. Очень надеюсь, что кто-нибудь сможет подкинуть мне идею для решения проблемы.

PS: лично у меня есть частное решение этой задачи, когда нам известна длина левого слова верхнего заголовка и длина нижнего заголовка (и она не превышает 50% от ширины блока), но это нельзя назвать решением проблемы.