JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="letter monospace">
    <div>A B C D E F G H I J</div>
</nav>
<nav class="letter">
    <div>A B C D E F G H I J</div>
</nav>
<div id="leftmiddle"> </div>
<div id="rightmiddle"> </div>

CSS

nav.letter{
    font-size:2em;
    text-align:center;
}
nav.letter > div{
    position:relative;
    left:1.05em;
}
nav.letter.monospace{
    font-family:monospace;
}
nav.letter.monospace > div{
    position:relative;
    left:1.75em;
}

nav ~ div{
    width:49%;
    min-height:200px;
    height: 80%;    
}
#leftmiddle{ float:left;    border-right:1px solid;}
#rightmiddle{    float:right;    border-left:1px solid;}