JSFiddle - React, Tailwind, and code Playground

HTML

<section>
<span>Afg</span>
<span class="oben">Bfg</span>
<span class="unten">Cfg</span>
</section>
<section class="test a">
<span>Afg</span>
<span class="oben">Bfg</span>
<span class="unten">Cfg</span>
</section>
<br><section class="b">
<span>Afg</span>
<span class="oben">Bfg</span>
<span class="unten">Cfg</span>
</section>
<section class="test b">
<span>Afg</span>
<span class="oben">Bfg</span>
<span class="unten">Cfg</span>
</section>
<div style="top: 19px" class="ruler"></div>
<div style="top: 46px" class="ruler"></div>
<div style="top: 93px" class="ruler"></div>
<div style="top: 120px" class="ruler"></div>

CSS

section {
  text-align: center;
  font-size: 40px;
  border: 1px solid red; 
  margin-bottom: 10px; padding: 0 10px; background-color: rgba(255,200,200,0.5);
  display: inline-block;
}
.test {
  border-color: #84e06c !important;
}
span:nth-of-type(n+2) { margin-left: 15px; }
.test .oben { vertical-align: text-top; }
.test .unten { vertical-align: text-bottom; }

.b { line-height: 60px; }

.ruler { border-top: 1px solid green; position: absolute; width: 100vw; z-index:-1;}