JSFiddle - React, Tailwind, and code Playground

by Richard Lovell

HTML

<div class="line">
<span class="line-text">
Hello this is a line that wraps with a <span class="chord">br<span>E#</span>ok<span>C#</span>en word.</span>
</span>
</div>

CSS

.chord {
   vertical-align: bottom; white-space: pre;
}
.chord span{
  display: inline-block;
    height: 34px;
    width: 0px;
    color: blue;
    white-space: pre;
    font-size:11px;
}

.line {
    min-height: 12px;
    width: 285px;
}

.line-text {
    vertical-align: bottom;
}