JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div-layout"> 
  <div class="div-layout-row"> 
    <div class="div-layout-row"> 
      <div class="div-layout-cell"><div class="box bottom-spacer right-spacer">Top Left</div></div>
      <div class="div-layout-cell"><div class="box bottom-spacer right-spacer">Top Middle</div></div> 
      <div class="div-layout-cell"><div class="box bottom-spacer right-spacer">Top Right</div></div> 
    </div> 

    <div class="div-layout-row"> 
       <div class="div-layout-cell"><div class="box right-spacer">Botom Left</div></div> 
       <div class="div-layout-cell"><div class="box right-spacer">Bottom Middle</div></div> 
       <div class="div-layout-cell"><div class="box right-spacer">Bottom Right</div></div> 
    </div> 

    <div  class="div-layout-cell box">Right</div>

  </div> 
</div>

CSS

#div-layout { 
  display: table; 
  width: 100%;
  height:100%;
} 

.div-layout-row { 
  display: table-row;
} 

.div-layout-cell { 
  display: table-cell; 
  width: 25%;
  height:100%;
} 

.right-spacer {
    margin-right:5px;
}
.bottom-spacer {
    margin-bottom:5px;
}

.box {
    border: 1px solid black;
    background-color: yellow;
    text-align: center;  
    vertical-align: middle;
    padding: 5px;
    height: 100%;
    min-height:50px;
    min-width:50px;
}