JSFiddle - React, Tailwind, and code Playground

by Naeel Maqsudov

HTML

<!--VERTICAL ALIGN-->
<div id="d1">asdas</div>
<div id="d2">
    <span class="inline top">aaa</span>
    <span class="inline mid">BBB</span>
    <span class="inline btm">ccc</span>
</div>

CSS

// .top {    vertical-align: top; 
//           display: inline-block; line-height: 14px; color:yellow}
// .mid {    vertical-align: middle;
//           display: inline-block; line-height: 14px; color:yellow}
// .btm {    vertical-align: bottom;
//           display: inline-block; line-height: 14px; color:yellow}

.inline { display: inline-block; line-height: 14px; color:yellow}
.top {    vertical-align: top; }
.mid {    vertical-align: middle;}
.btm {    vertical-align: bottom;}
div {     position:absolute;width:100px;
          border:10px solid red;    background:green;    text-align:center;}
#d1 {     left: 50px; top:50px;  height:66px;line-height: 66px;}
#d2 {     left: 130px; top:90px; height:100px;line-height: 100px;}