JSFiddle - React, Tailwind, and code Playground

by nathan

HTML

<div class="line">
    <span class="segment" data-chord="C">Amazing grace, how </span>
    <span class="segment" data-chord="Am/maj9add6add11(b13)(+11)/E">sweet the</span>
    sound
</div>
<div class="line">
    That saved a wretch like me
</div>
<div class="line">
    I once was lost but now am found
</div>
<div class="line">
    Was blind but now I see
</div>

CSS

.segment {
    margin-top: 1em;
    display: inline-block;
}
.segment[data-chord]:before {
    content: attr(data-chord);
    position: relative;
    top: -1em;
    display: inline-block;
    width: 0;
    height: 1em;
    overflow-x: visible;
}