Two columns over full width with left-aligned content, second column aligned at right page border

Question

I'm currently formatting an ebook and hit a slight problem. Assume the following wanted layout:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vehicula,
ipsum accumsan  sollicitudin  mollis,  leo est porttitor lacus, id facilisis
tellus  lacus  blandit  metus.  Aenean  imperdiet  in eros facilisis mollis.

Great-grandson of Alexios III                            Son of Michael VIII
Son and co-ruler of Andronikos II                        Son of Michael IX
Son of Andronikos III                                    Son of John V

Aliquam  quam  eros,  eleifend vel erat ut, eleifend laoreet quam. Phasellus
euismod  ex  pellentesque  lacus  auctor, malesuada efficitur nunc pharetra.
Aliquam  ut  condimentum  neque.  Suspendisse ornare nibh non nisi pharetra,
ac       porttitor       sapien       venenatis.      Suspendisse   potenti.

Text is justified, two columns, both contain left-aligned text but the second column is aligned at the right page border.

Here is a demonstration of my current solution using a table:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vehicula,
ipsum accumsan sollicitudin mollis, leo est porttitor lacus, id facilisis
tellus lacus blandit metus. Aenean imperdiet in eros facilisis mollis.</p>

<table>
  <tr>
    <td>Great-grandson of Alexios III</td>
    <td>Son of Michael VIII</td>
  </tr>
  <tr>
    <td>Son and co-ruler of Andronikos II</td>
    <td>Son of Michael IX</td>
  </tr>
  <tr>
    <td>Son of Andronikos III</td>
    <td>Son of John V</td>
  </tr>
</table>

<p>Aliquam quam eros, eleifend vel erat ut, eleifend laoreet quam. Phasellus
euismod ex pellentesque lacus auctor, malesuada efficitur nunc pharetra.
Aliquam ut condimentum neque. Suspendisse ornare nibh non nisi pharetra,
ac porttitor sapien venenatis. Suspendisse potenti.</p>

p {
  text-align: justify;
}

table {
  width: 100%;
}

table td {
  white-space: nowrap;
}

table tr > td:first-child {
  width: 100%;
}

However, that has the serious downside of behaving very poorly when the font-size increases and/or the display width decreases. The nowrap of the content makes it impossible to read in these circumstances as the lines will never be wrapped and instead start to overlap each other and/or getting pushed out-of-bounds.

Is there a solution to have such a layout but with wrapping of the content to accommodate larger fonts and smaller displays which will work with ebook readers? Ideally it should also preserve the order of items (left-right, top-bottom) for text-to-speech software, not just visually.

Answer 1

Imagine something like that. That way they will preserve the order for the text-to-speech software and will make it readable without the need for side-scrolling.

p {
  text-align: justify;
}

table {
  width: 100%;
}

table td {
  white-space: nowrap;
}

table tr>td:first-child {
  width: 100%;
}

@media only screen and (max-width: 400px) {
  tr, td {
    display: block;
  }
  
  tr {
    margin-bottom: 10px;
  }
  
  .value::before {
    content: "- ";
    padding-left: 10px;
  }
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vehicula, ipsum accumsan sollicitudin mollis, leo est porttitor lacus, id facilisis tellus lacus blandit metus. Aenean imperdiet in eros facilisis mollis.</p>

<table>
  <tr>
    <td>Great-grandson of Alexios III</td>
    <td class="value">Son of Michael VIII</td>
  </tr>
  <tr>
    <td>Son and co-ruler of Andronikos II</td>
    <td class="value">Son of Michael IX</td>
  </tr>
  <tr>
    <td>Son of Andronikos III</td>
    <td class="value">Son of John V</td>
  </tr>
</table>

<p>Aliquam quam eros, eleifend vel erat ut, eleifend laoreet quam. Phasellus euismod ex pellentesque lacus auctor, malesuada efficitur nunc pharetra. Aliquam ut condimentum neque. Suspendisse ornare nibh non nisi pharetra, ac porttitor sapien venenatis. Suspendisse potenti.</p>

To test it in the code snippet you can resize the window to be more narrow on desktop or open it on mobile.

Answer 2

I don't think you have to use a table to do this. You can simply do this:

<div class="container">
        <div class="top-section">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vehicula,
                ipsum accumsan sollicitudin mollis, leo est porttitor lacus, id facilisis
                tellus lacus blandit metus. Aenean imperdiet in eros facilisis mollis.
            </p>
        </div>

        <div class="middle-section">
            <div class="left">
                <ul>
                    <li>Great-grandson of Alexios III</li>
                    <li>Son and co-ruler of Andronikos II</li>
                    <li>Son of Andronikos III</li>
                </ul>
            </div>
            <div class="right">
                <ul>
                    <li>Son of Michael VIII</li>
                    <li>Son of Michael IX</li>
                    <li>Son of John V</li>
                </ul>
            </div>
        </div>

        <div class="bottom-section">
            <p>
                Aliquam quam eros, eleifend vel erat ut, eleifend laoreet quam. Phasellus
                euismod ex pellentesque lacus auctor, malesuada efficitur nunc pharetra.
                Aliquam ut condimentum neque. Suspendisse ornare nibh non nisi pharetra,
                ac porttitor sapien venenatis. Suspendisse potenti.
            </p>
        </div>
    </div>

.container {
    width: 50%;
    margin: auto;
}

.middle-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    margin: 0;
    padding: 0;
    list-style: none;
}

And you get this: