Edit in JSFiddle

*{
  font-size:18px;
  line-height:25px;
}
.top {
    vertical-align: top;
}
.middle {
    vertical-align: middle;
}
.bottom {
    vertical-align: bottom;
}
.baseline {
    vertical-align: baseline;
}
.text-top {
    vertical-align: text-top;
}
.text-bottom {
    vertical-align: text-bottom;
}
.super {
    vertical-align: super;
}
.sub {
    vertical-align: sub;
}
<p>
<span class="top">top</span>
<span class="middle">middle</span>
<span class="bottom">bottom</span>
<span class="baseline">baseline</span>
<span class="text-top">text-top</span>
<span class="text-bottom">text-bottom</span>
<span class="super">Super</span>
<span class="sub">Sub</span>
</p>