JSFiddle - React, Tailwind, and code Playground

@author Roman Grinyov <[email protected]>

HTML

<div>VA <span class="baseline">BASELINE</span></div>
<div>VA <span class="bottom">BOTTOM</span></div>
<div>VA <span class="middle">MIDDLE</span></div>
<div>VA <span class="sub">SUB</span></div>
<div>VA <span class="super">SUPER</span></div>
<div>VA <span class="text-bottom">TEXT_BOTTOM</span></div>
<div>VA <span class="text-top">TEXT-TOP</span></div>
<div>VA <span class="top">TOP</span></div>

CSS

html {
  font-size: 100px
}

div {
  text-decoration: underline
}

span {
  font-size: .5em
}

.baseline {
  vertical-align: baseline
}

.bottom {
  vertical-align: bottom
}

.middle {
  vertical-align: middle
}

.sub {
  vertical-align: sub
}

.super {
  vertical-align: super
}

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

.text-top {
  vertical-align: text-top
}

.top {
  vertical-align: top
}