Responsive chords above lyrics without added whitespace in lyrics - html

Question

I'm trying to render chords over lyrics using HTML and found a near perfect solution here on StackOverflow. My one problem with this solution is that it creates extra whitespace after lyrics if the chord name is longer than the associated word. This can be seen on the Csus4 of the first "Imagine" in the example at the end of this question.
To sum it up, I want to render chords over lyrics using HTML such that:
chords are always above the right lyrics
if screen is smaller than the line, lines overflow on word boundaries
if the chords are larger than the text below it doesn't create space between the lyrics
a chord can also be in the middle of a word
Edit:
chords never overlap
I have searched StackOverflow and googled a lot but every solution I found fails one of these criteria. All help is greatly appreciated!
Edit: Solutions may also involve javascript though I hope this can be solved without needing javascript.
body {
padding: 20px;
font-size: 30px;
}
.line {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
}
.chord-letter {
display: flex;
flex-direction: column;
align-items: left;
}
.no-space {
margin-right: 0;
border: solid 1px red;
}
.space {
margin-right: 0.33em;
border: solid 1px green;
}
.chord {
color: gray;
font-style: italic;
font-weight: bold;
font-size: 1.2em;
border: solid 1px blue;
}
.no-space .chord {
margin-right: 0.33em;
}
.word {
display: flex;
flex-direction: row;
align-items: flex-end;
}
<div class="line">
<div class="word">
<span class="no-space">Ima</span>
<div class="chord-letter space"><span class="chord">Csus4</span>gine</div>
</div>
<span class="space">there's</span>
<div class="chord-letter space"><span class="chord">Cmaj7</span>no</div>
<div class="chord-letter space"><span class="chord">F</span>heaven</div>
<div class="word">
<span class="no-space">Ima</span>
<div class="chord-letter space"><span class="chord">C</span>gine</div>
</div>
</div>

Answer 1

Basically you just need to set the chords to be position: absolute so they won't be part of the flow. You'd still need to figure out what to do when they overlap.
body {
padding: 20px;
font-size: 30px;
}
.line {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
}
.chord-letter {
display: flex;
flex-direction: column;
align-items: left;
}
.no-space {
margin-right: 0;
border: solid 1px red;
}
.space {
margin-right: 0.33em;
border: solid 1px green;
}
.chord {
color: gray;
font-style: italic;
font-weight: bold;
font-size: 1.2em;
border: solid 1px blue;
}
.no-space .chord {
margin-right: 0.33em;
}
.word {
display: flex;
flex-direction: row;
align-items: flex-end;
}
/* add these */
.word {
padding-top: 50px;
}
.chord {
position: absolute;
top: 0;
}
.line {
position: relative;
}
<div class="line">
<div class="word">
<span class="no-space">Ima</span>
<div class="chord-letter space"><span class="chord">Csus4</span>gine</div>
</div>
<span class="space">there's</span>
<div class="chord-letter space"><span class="chord">Cmaj7</span>no</div>
<div class="chord-letter space"><span class="chord">F</span>heaven</div>
<div class="word">
<span class="no-space">Ima</span>
<div class="chord-letter space"><span class="chord">C</span>gine</div>
</div>
</div>