[bdub]

Originally Posted by RbnJrg

If you don't want to use a table, there's the option (and in this case, I'd say it's preferable) of a two-column layout based on the "display: inline-block" property. A quick solution could be the following:

XHTML Code:

  <div class="wrapper">
    <div class="column">
      <p>☊</p>
      <p>Y'AI 'NG'NGAH,</p>
      <p><i>YOG-SOTHOTH</i></p>
      <p>H'EE—L'GEB</p>
      <p>F'AI THRODOG</p>
      <p><i>UAAAH</i></p>
    </div>

    <div class="column">
      <p>☋</p>
      <p>OGTHROD AI'F</p>
      <p>GEB'L—EE'H</p>
      <p><i>YOG-SOTHOTH</i></p>
      <p>'NGAH'NG AI'Y</p>
      <p><i>ZHRO</i></p>
    </div>
  </div>

CSS Code:

  .wrapper {
    text-align: center;
    width: 100%;
  }

  .column {
    display: inline-block;
    width: 40%;
    text-align: center;
    vertical-align: top;
  }

  .column p {
    margin: 0;
    text-indent: 0;
  }

Of course, the above code can be improved since I didn't take optimization into account here, but rather to give the idea of ​​how the "display: inline-block" property (the basis of the entire design) should be used to achieve the desired effect.

This approach is rendering what I'd like to see in the preview in Calibre. I did reduced the width in .column to 20%.

I asked for a non-table version because I've had issues with tables rendering on my KOBO.

I'm still cleaning up the CSS and formatting, but I should be able test out this approach this weekend on my KOBO.

I do need to better understand what inline block actually does, so I'll dig in more this weekend.

What do you mean by optimization here?

Thanks everyone else for the other suggestions too.