JSFiddle - React, Tailwind, and code Playground

by Leo Gao

HTML

<div><!-- 
 --><span class="line middle v-line red"></span><!--
 --><span class="line baseline v-line blue"></span><!--
 --><span class="image"></span>
    <span class="text">My Name</span>
</div>

<div style="margin-top:50px;"><!-- 
 --><span class="line middle v-line red"></span><!--
 --><span class="line baseline v-line blue"></span><!--
 --><span class="image middle"></span>
    <span class="text">My Name</span>
</div>

<div style="margin-top:50px;"><!-- 
 --><span class="line middle v-line red"></span><!--
 --><span class="line baseline v-line blue"></span><!--
 --><span class="image middle"></span>
    <span class="text middle">My Name</span>
</div>

CSS

body {
    font-size: 26px;
}

.image {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: green;
}
.middle { vertical-align: middle; }

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

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

.blue {
    border-color: blue;
}

.red {
    border-color: red;
}