JSFiddle - React, Tailwind, and code Playground

HTML

<div class="word">
    <p class="letter taller"></p><!--
    --><p class="letter"></p><!--
    --><p class="letter"></p><!--
    --><p class="letter hanging"></p><!--
    --><p class="letter"></p><!--
    --><p class="letter taller"></p><!--
    --><p class="letter"></p>
</div>


<div>herp derp I clearly have nothing better to do on friday</div>

CSS

p {
    display: inline-block;
}
.letter {
    padding 1.618em;
    border-width: 1px;
    border-style: solid;
    width: 2em;
    height: 2em;
}
.taller {
    height: 4em;
}
.hanging {
    margin-bottom: -16px;
    height:4em;
}