JSFiddle - React, Tailwind, and code Playground

HTML

<table class="container" cellpadding="0">
 <tr>
  <td>
   <table class="left">
    <thead>
     <tr>
      <th>Text Header</th>
     </tr>
    </thead>
    <tbody>
     <tr>
      <td>I somehow couldn't get the JavaScript to work here, but if you change the width of the image manually (just scroll down a bit in the HTML panel, max 250px) you'll see that this table setup works. The colours are just a simple high contrast example and the CSS is stripped down.<br><br>
          Thanks for your help.
      </td>
     </tr>
    </tbody>
   </table>
  </td>
  <td>
   <table class="right">
        <thead><tr>
        <th>Image Header</th>
        </tr></thead>
        <tbody>
        <tr>
        <td>
         <img src="http://www.derdiz.com/wp-content/uploads/2011/06/vertigo.jpg" width="200" height="200" border="0" style="display:block;">
        </td>
        </tr>
        </tbody>
        </table>
  </td>
 </tr>
</table>

CSS

table {
    border-collapse: collapse;
}
table.container {
    width: 500px;
    background-color: #DDD;
    border: 1px solid #0F0;
}
.container td {
    vertical-align: top;
}
table.left {
    border: 0px;
}
table.right {
    border-left: 1px solid #F00;
}
.left th, .left td, .right th, .right td {
    padding: 3px;
}
.left thead th, .right thead th {
    background-color: #00F;
    color: #FFF;
    font-weight: bold;
    text-align: left;
}
.right tbody td {
    background-color: #888;
}