JSFiddle - React, Tailwind, and code Playground

HTML

<div class="letter">
    <div class="wrapper">
        <div class="before">
          0 2 3 4  A B C
        </div>
        D        
        <div class="after">
            E F G H I J
        </div>
    </div>
</div>
<div style="font-family:sans-serif" class="letter">
    <div class="wrapper">
        <div class="before">
            A B C
        </div>
        D        
        <div class="after">
            E F G H I J
        </div>
    </div>
</div>
<div style="font-family:monospace" class="letter">
    <div class="wrapper">
        <div class="before">
            A B C
        </div>
        D        
        <div class="after">
            E F G H I J K L M N O P Q R
        </div>
    </div>
</div>
<div id="leftmiddle"> </div>
<div id="rightmiddle"> </div>

CSS

.letter{
    font-size:2em;
    text-align:center;
    overflow:hidden;
}
.letter > .wrapper{
    width:1em;
    margin:auto;
    position:relative;
}
.letter > .wrapper > .before{
    position:absolute;
    right:1.25em;
    text-align:right;
    width:10em;
}
.letter > .wrapper > .after{
    position:absolute;
    text-align:left;
    top:0;
    left:1.25em;
    width:20em;
}

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