JSFiddle - React, Tailwind, and code Playground

by Leo Gao

HTML

<span class="line"><!-- 
 --><span class="line v-line top red"></span><!--
 --><span class="line v-line bottom red"></span><!--
 --><span class="line v-line text-top green"></span><!--
 --><span class="line v-line text-bottom green"></span><!-- 
 --><span class="line v-line baseline blue"></span><!-- 
 --><span class="line center">
        <span class="middle">This </span>
        <span class="rect text-top"></span>
        <span class="top">top </span>
        <span class="rect text-bottom"></span>
        <span class="bottom"> bottom</span>
        <span>I'm on the baseline</span>
    </span>
</span>

<span class="line" style="margin-top: 50px; line-height:50px;"><!--
 --><span class="line v-line baseline blue"></span><!--
 --><span class="line v-line top red"></span><!--
 --><span class="line v-line bottom red"></span><!--
 --><span class="line v-line text-top green"></span><!--
 --><span class="line v-line text-bottom green"></span><!-- 
 --><span class="line center">abcpqtqpmm</span>
</span>

<span class="line" style="margin-top: 50px;"><!--
 --><span class="line v-line baseline blue"></span><!--
 --><span class="line v-line top red"></span><!--
 --><span class="line v-line bottom red"></span><!--
 --><span class="rect"></span>
</span>

CSS

body {
    font-size: 20px;
}

.line {
    display: inline-block;
    width: 100%;
}
.border {
    border-width: 1px;
    border-color: red;
}

.dotted {
    border-style: dotted;
}

.center {
    text-align: center;
}

.rect {
    display: inline-block;
    width: 20px;
    height: 40px;
    background-color: #ccc;
}

.middle {
    vertical-align: middle;
}

.top {
    vertical-align: top;
}

.bottom {
    vertical-align: bottom;
}

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

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

.baseline {
    vertical-align: baseline;
}

.v-line {
    position: relative;
    margin-right: -100%;
    border-top-width: 1px;
    border-top-style: dotted;
}

.blue {
    border-color: blue;
}

.green {
    border-color: green;
}

.red {
    border-color: red;
}