JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

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