Task - Puzzle, difficult for layout alignment

I apologize in advance for sticking with my questions, but unexpectedly for myself I was faced with a task that I can’t realize with the help of CSS.

Task: complete the next layout



The difficulty is the alignment of elements in the headers. In the top header, the text of the blocks (each 50% wide) is centered.
')
The left edge of the bottom header should be aligned with the left edge of the top left header.

HTML code I sketched something like this:

 <div>
     <ul>
         <li> <a href="#"> heading text </a> </ li>
         <li> <a href="#"> heading text </a> </ li>
     </ ul>
 </ div>
 <! - a piece of text, its height can not be calculated ->
 <div>
     <p>
         The full moon vital reflects the central aphelion, this agreement was concluded
     </ p>
     <p>
         Highlights of the sky, following the pioneering work of Edwin Hubble, estimates the elliptical equator
     </ p>
 </ div>
 <dl>
     <dt> <span> long text aligned with heading </ span> </ dt>
     <dd>
         <! - a piece of text, its height can not be calculated ->
         The full moon vital reflects the central aphelion, this agreement was concluded
     </ dd>
 </ dl>

The resolution in the forums and friends was the same: to do it through JavaScript. But I still want to believe in the power of CSS and that this task can be accomplished with CSS. I really hope that someone will be able to give me an idea to solve the problem.

PS: I personally have a particular solution to this problem when we know the length of the left word of the upper header and the length of the lower header (and it does not exceed 50% of the block width), but this cannot be called a solution.