JSFiddle - React, Tailwind, and code Playground

by Leo Gao

HTML

<span class="line"><!-- 
 --><span class="line middle v-line green"></span><!--
 --><span class="line baseline v-line blue"></span><!-- 
 -->x<span class="middle" style="margin-left: 20px;">middle</span>
</span>

CSS

body {
    font-size: 20px;
}

.line {
    display: inline-block;
    width: 100%;
}

.baseline {
    vertical-align: baseline;
}

.middle {
    vertical-align: middle;
}

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

.green {
    border-color: green;
}

.blue {
    border-color: blue;
}