JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
  <table  class="col-lg-6 col-sm-10 col-md-8 col-xs-12"  border="1">
    <tr>
      <td class="col-lg-3">
      <div class='placeholder'>
      
      </div>
      <div>
       as;dfjdj f;s f;sj f;sjdf      
      </div>

      </td>
      <td class="col-lg-3">
        <div>
       as;dfjdj f;s f;sj f;sjdf      
      </div>
      </td>
      <td class="col-lg-3"></td>
      <td class="col-lg-3">&nbsp;</td>
    </tr>
    <tr>
      <td class="col-lg-3">
      <div class='placeholder'>
      
      </div>
        <div>
      
        </div>
      </td>
      <td colspan="2" rowspan="2" class="col-lg-6 td-wide">&nbsp;</td>
      <td class="col-lg-3"><div>
       as;dfjdj f;s f;sj f;sjdf      
      </div></td>
    </tr>
    <tr>
      <td class="col-lg-3">
      <div class='placeholder'>
      
      </div>
        <div>
       as;dfjdj f;s f;sj f;sjdf  k kljsf sdf;ljsd fjsd f;lkjsd f;k jsad;lfkjas d;kk ;fjsadf    
      </div>
      </td>
      <td class="col-lg-3">
        <div>
        asdfsadf
        </div>
      </td>
    </tr>
    <tr>
      <td class="col-lg-3">
        <div>
        
        </div>
      </td>
      <td class="col-lg-3">
      <div class='placeholder'>
      
      </div>
      <div>
       as;dfjdj f;s f;sj f;sjdf      
      </div>
      </td>
      <td class="col-lg-3">&nbsp;</td>
      <td class="col-lg-3">&nbsp;</td>
    </tr>
  </table>
</div>

CSS

td{
  width: 25%;
  height: 25%;
  padding:0 !important;
  
  overflow:auto;
}
td.td-wide{
  height: auto;
}
td div{
  position:absolute;
  width: 25%;
  
}
.placeholder{
  padding-bottom: 100%;
  position:relative;
}