JSFiddle - React, Tailwind, and code Playground

HTML

<div class="default">
<span class="A">Hello World</span>
<span class="B">Hello World</span>
<span class="C">Hello World</span>
<span class="D">Hello World</span>
</div>
<div class="top">
<span class="A">Hello World</span>
<span class="B">Hello World</span>
<span class="C">Hello World</span>
<span class="D">Hello World</span>
</div>
<div class="middle">
<span class="A">Hello World</span>
<span class="B">Hello World</span>
<span class="C">Hello World</span>
<span class="D">Hello World</span>
</div>
<div class="bottom">
<span class="A">Hello World</span>
<span class="B">Hello World</span>
<span class="C">Hello World</span>
<span class="D">Hello World</span>
</div>
<div class="baseline">
<span class="A">Hello World</span>
<span class="B">Hello World</span>
<span class="C">Hello World</span>
<span class="D">Hello World</span>
</div>

CSS

span {
  margin: 10px;
  font-size: 40px;
  text-decoration: underline;
}
div {
  border-bottom: 1px solid black;
}
.default span{
  vertical-align: initial;
}
.top span {
  vertical-align: top;
}
.middle span {
  vertical-align: middle;
}
.bottom span {
  vertical-align: bottom;
}
.baseline span {
  vertical-align: baseline;
}
.A {
  font-family: Georgia, serif;
}
.B {
  font-family: Arial, Helvetica, sans-serif;
}
.C {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.D {
  font-family: Tahoma, Geneva, sans-serif;
}