JSFiddle - React, Tailwind, and code Playground

HTML

<div class='table'>
        <div class='cell'>
           <div class='table'>
              <div class='row'>
                 <p>Some text</p>
                 <p>Lorem ipsum dolor sit amet consectetuer mauris id sapien at elit. Nec Morbi Nam a Morbi id et pretium Ut sagittis orci. Senectus eros Nulla venenatis mi ultrices eget Nam nec convallis ligula.</p>
              </div>
           </div>
        </div>
        <div class='cell'>
           <div class='table'>
              <div class='row'>
                 <p>Some text</p>
              </div>
              <div class='data row'>
                 <p>Some text</p>
              </div>
              <div class='row'>
                 <p>Some text</p>
              </div>
              <div class='row'>
                 <p>Some text</p>
              </div>
           </div>
        </div>
     </div>

CSS

html, body {
          margin: 0;
          padding: 0;
       }

       .table {
          display: table;
          table-layout: fixed;
          width: 100%;
          height: 100%;
       }

       .cell {
          display: table-cell;
       }

       .row {
          display: table-row;
       }

       .table>.cell {
          width: 50%;
          height: 100%;
          border: 1px solid red;
       }

       .table .cell .row {
          border: 1px solid blue;
       }

       .row p:first-child {
          margin: 0;
          width: 64px;
          height: 64px;
          background: tomato;
          float: left;
       }

       .row p {
          margin: 0;
       }

       .cell .table {
          border-spacing: 10px;
          border-collapse: separate;
       }