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>

CSS

.word {
font-size: 0;
}
p {
    display: inline-block;
    font-size: 30px;
}
.letter {
    padding 1.618em;
    border-width: 1px;
    border-style: solid;
    width: 2em;
    height: 2em;
}
.taller {
    height: 4em;
}
.hanging {
    padding 1.618em;
    border-width: 1px;
    border-style: solid;
    width: 2em;
    height: 4em;
    position: relative;
    top: 2em;
}