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;
	   border: 1px solid red;
   }
   
   [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;
   }