How to handle wrapping of two lines at the same time?

[Myshaak]

Hi everyone,

I'm trying to convert a collection of songs into an ebook for Kindle Paperwhite.

The problem I am facing is that I don't know how to ensure that the line with lyrics will break with the line with chords. The belows picture should illustrate it.

Before wrap:


After wrap (and intended result):


I tried several approaches, but the only one that seemed to be working was merging the two lines into a single table row and keep both the chords and song lyrics in individual cells. Sounds crazy, but works - the screenshots are actually from the Calibre ebook viewer, format EPUB. And no, I didn't write the HTML madness manually



This is the CSS I use:

td {
  white-space: pre;
  font-family: monospace;
  display: inline-block;
  border: 1px dotted gray;
}

However, when I send this EPUB to my kindle address, the text wrapping does not work - the table rows go out of page (when changing font size, for example).

I later read that tables are not ideal for layout. Would you recommend an alternative solution?

Many thanks!