How to get two lines of text fixed at positions? - html

Question

How can I achieve from this
to this
when resizing the browser.
For your information, these are the lines of lyrics with chords. I want to achieve exact same fixed position of chords above lyrics to make it responsive. I am using HTML, CSS.
Anybody, please help.
.lines {
margin: 5px 0;
}
.lyrics,.notes {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: rgb(45, 45, 45);
font-weight: 600;
}
.lines>span:first-child:after {
content: "\A";
white-space: pre-line;
}
.notes {
color: rgb(0, 150, 0);
background-color: rgb(241, 241, 241);
}
<div class="lines">
<span> <span class="notes">G</span> <span class="notes">Em</span></span>
<span class="lyrics">Well, I found a girl, beautiful and sweet</span>
</div>
<div class="lines">
<span> <span class="notes">C</span> <span class="notes">D</span></span>
<span class="lyrics">Oh, I never knew you were the someone waiting for me</span>
</div>

Answer 1

this way...
(()=> // IIFE code on load for lyrics presentation
{
const rgxCut = /(?=\[)|(?<=\])/;
document.querySelectorAll('div.lyrics p').forEach( pLine =>
{
let newP = pLine.textContent
.replaceAll('] [','] [')
.split(rgxCut)
.map( el =>
{
if (el[0]!=='[') return el
let chord = el.substring(1,el.length-1)
return `<span class="chord" data-chord="${chord}"></span>`
})
pLine.innerHTML = newP.join('')
})
}
)()
/* --- for testing --- */
body {
font-family : Arial, Helvetica, sans-serif;
font-size : 20px;
}
.reSizable {
resize : both;
overflow : scroll;
padding : .5em;
border : 1px solid orange;
}
/* ------------------- */
div.lyrics p {
line-height : 2.5em;
}
div.lyrics p span[data-chord] {
position : relative
}
div.lyrics p span[data-chord]::after {
position : absolute;
top : -1.2em;
left : -.1em;
line-height : 1.2em;
padding : 0 .2em;
font-size : .9em;
color : darkgreen;
background : lightgrey;
content : attr(data-chord);
}
<div class="reSizable">
<div class="lyrics">
<p>Well, I found a [G]girl, beauti[Em]full and sweet</p>
<p>Oh, I never [C]knew you where the someone waiting for [D]me</p>
</div>
</div>