JSFiddle - React, Tailwind, and code Playground

HTML

<div id="title">I can only imagine (A131)</div>
<div id="artist">Bart Millard</div>

1. I can only im<span class="chord"><span class="inner">D</span></span>agine what it will be like when I <span class="chord"><span class="inner">G</span></span>walk by Your side.<br>
I can only  <span class="chord"><span class="inner">D</span></span>imagine what my eyes will see when Your <span class="chord"><span class="inner">G</span></span>face is before me.<br>
I can only im<span class="chord"><span class="inner">D</span></span>agine, I can only i<span class="chord"><span class="inner">G</span></span>magine.
<div class="chorus"><div class="chorus-text">
Sur<span class="chord"><span class="inner">Gsus2</span></span>rounded by Your glory, what <span class="chord"><span class="inner">Asus4</span></span>will my heart feel? 
 Will I <span class="chord"><span class="inner">D</span></span>dance for You, Jesus, or in awe of You be still? 
 Will I <span class="chord"><span class="inner">Gsus2</span></span>stand in Your presence or to my <span class="chord"><span class="inner">Asus4</span></span>knees will I fall? 
 Will I <span class="chord"><span class="inner">D</span></span>sing Hallelujah? Will I be <span class="chord"><span class="inner">Asus4</span></span>able to speak at all? 
 I can only <span class="chord"><span class="inner">Gsus2</span></span>imagine, <span class="chord"><span class="inner">Asus4</span></span>I can only im<span class="chord"><span class="inner">D</span></span>agine. 
</div></div>

2. <span class="chord"><span class="inner">E</span></span>I can only imagine when that <span class="chord"><span class="inner">Asus2</span></span>day comes,
When I <span class="chord"><span class="inner">Asus2</span></span>find myself standing <span class="chord"><span class="inner">H</span></span>in the sun,
I can only <span class="chord"><span class="inner">E</span></span>imagine when all <span class="chord"><span class="inner">Esus4</span></span>I will do
Is for<span...

CSS

* {
  font-family: "Century Gothic",CenturyGothic,AppleGothic,sans-serif;
  font-size: var(--textSize);
  line-height: 200%;
}

#title {
  font-size: large;
  font-weight: bold;
  padding-bottom: 0px;
}

.chorus-text {
  border-style: solid;
  border-width: thin;
  border-color: #FF0000;
   padding: 5px;
}

.chorus {
  padding-left: 20px;
  padding-top: 10px;
  padding-bottom: 20px;
}

#ccli::before {
  content: "CCLI: ";
}

#copyright::before {
  content: "\00a9 ";
}

#copyright {
  font-size: x-small;
  line-height:1.2 !important
}

#ccli {
  font-size: x-small;
  line-height:1.2 !important
}

#artist {
  font-size: small;
  padding-bottom: 10px;
}

.chord { position: absolute;
  font-size: 13px;
  font-weight: bold;
  color: red;
}

.chord .inner {
  position: relative;
  top: -1em;
}