JSFiddle - React, Tailwind, and code Playground

HTML

<div id='wrap'>
         <header>
         </header>
         <main>
         <div class='table'>
               <div class='cell' id='squares'>
                  <p id='square-1'>square 1</p>
                  <p id='square-2'>square 2</p>
                  <p id='square-3'>square 3</p>
                  <p id='square-4'>square 4</p>
               </div>
               <div class='cell'>
                  <p>Title</p>
                  <p>Here some other text<span>-</span>and other text here</p>
                  <p>and again, there is some other text<span>-</span>text text text<span>-</span><a href=''>and link here</a></p>
               </div>
               <div class='cell'>
                  <p><a href=''>Link 1</a></p>
                  <p><a href=''>Link 2</a></p>
                  <p><a href=''>Link 3</a></p>
               </div>
            </div>
         </main>
         <footer>
            
         </footer>
      </div>

CSS

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

       #wrap {
          display: table;
       }

       header, main, footer {
          display: table-row;
       }

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

       .cell {
          display: table-cell;
          border: 1px solid black;
          vertical-align: top;
          
          
       }

       p {
          padding: 0;
          margin: 0;
       }

       #squares p {
          width: 85px;
          height: 85px;
          float: left;
          text-indent: -9999em;
       }

       #square-1 { background: red; }
       #square-2 { background: blue; }
       #square-3 { background: yellow; }
       #square-4 { background: tomato; }