alternating two lines in a div - html

Question

i'm making a chords app and i need the following pattern:
Am F G Am Ab Gdim A#
Hello this is are lyrics just for demonstration hey hey hello
to turn into this:
Am F G Am
Hello this is are lyrics just
Ab Gdim A#
for demonstration hey hey hello
when reaching end of div
i saw a similar question in android, and they suggested using a linear layout to achieve this.
edit: as requested, this is the code i currently have:
<div class="container">
<div class="line">hello this is my first line, it has a lot of words and will wrap to the next line</div>
<div class="line">A B C D E F G H I J K L</div>
</div>
there is no css right now, the classes are empty
Edit: the break should happen at the end of the div, when the word is supposed to wrap, so that the two lines are acting as one line at the break (like in the example)

Answer 1

If you know the amount of characters you want per-line, you can achieve this using javascript: https://codepen.io/schart/pen/OJwdexj
In the solution above, what I'm doing is
Getting the text content of both of the lines
Splitting them both up into chunks of a given length of characters
Creating new HTML using these lists to map them into pairs of lines.
Here is the Javascript, in case the link ever expires:
const charsPerLine = 38;
const computeLine = (line) => {
const regexp = `.{1,${charsPerLine}}`
const newLines = line.match(new RegExp(regexp, "g"));
return newLines;
}
const computeLines = () => {
const [text, notes] = [...document.querySelectorAll(".line-container > .line")].map((line) => line.textContent);
const [textLines, notesLines] = [text, notes].map((line) => computeLine(line));
const maxLines = Math.max(textLines.length, notesLines.length);
let newHTML = "";
for (let i = 0; i < maxLines; i++) {
newHTML += `<div class="line">${textLines[i] ?? ""}</div>`;
newHTML += `<div class="line">${notesLines[i] ?? ""}</div>`;
}
document.querySelector(".line-container").innerHTML = newHTML;
}
computeLines();
This solution assumes that you have all the text in the first .line and all the notes in the second .line