JSFiddle - React, Tailwind, and code Playground

HTML

<table>
   <tr>
      <td class="header">
         Column 1
      </td>
      <td class="header">
         Column 2
      </td>
   </tr>
   <tr>
      <td class="body_twenty">
         <table>
            <tr>
               <td>
                  Test...
               </td>
            </tr>
         </table>
      </td>
      <td class="body_eighty">
         <table>
            <tr>
               <td>
                  Test...
               </td>
               <td>
                  Test...
               </td>
            </tr>
         </table>
      </td>
   </tr>
   <tr>
      <td class="body_twenty">
         <table>
            <tr>
               <td>
                  Test...
               </td>
            </tr>
            <tr>
               <td>
               </td>
            </tr>
            <tr>
               <td>
               </td>
            </tr>
         </table>
      </td>
      <td class="body_eighty">
         Test...
         <img src="http://www.psdgraphics.com/file/colorful-triangles-background.jpg">
      </td>
   </tr>
   <tr>
      <td class="footer">
      </td>
      <td class="footer">
      </td>
   </tr>
</table>

CSS

<style>
   table {
   width: 100%;
   border: 0px;
   }
   .header {
   background-color: blue;
   text-align: center;
   }
   .body_twenty {
   background-color: gray;
   text-align: left;
   width: 20%;
   }
   .body_eighty {
   background-color: gray;
   text-align: left;
   width: 80%;
   }
   .footer {
   background-color: blue;
   text-align: left;
   }
   img { 
   max-width: 100%; 
   }
</style>