JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'>
<div class="grid">
    <div class='grid'>
    <div class="col-1-3">

        <p class='col-word'>T</p>
        <p class='col-word'>V</p>
        
        
        
    </div>
    </div>
    
    <div class='grid'>
    <div class='col-1-3'>
        <div class='letter'>W</div>
    </div>
    <div class='col-1-3'>
        <div class='letter'>P</div>
    </div>
    <div class='col-1-3'>
        <div class='letter'>V</div>
    </div>
    
    </div>
    
    
</div>
</div>

CSS

.container {
    margin: 0 auto;
    }
    [class*='col-']{
        float: left;
    }
    .col-2-3 {
        width: 66.66%;
    }
    
    .col-1-3 {
        width: 33.33%;
    }
    
    .grid:after{
        content: "";
        display: table;
        clear: both;
        
    }
   
    .col-word{
        width: auto;
        height: auto;
        padding: 25px;
        border: 5px #000 solid;
        border-left: 0px;
        border-right: 0px;
        background-color:  #A7F4F6;
        font-size: xx-large;
        text-align: center;
        
    }