JSFiddle - React, Tailwind, and code Playground

HTML

<table class="container" width="300px" border="0" cellpadding="0" cellspacing="0" style="margin-left: auto; margin-right: auto;">
    <tr>
        <td>
           
            <table class="hello2">
                <tr>
                    <td valign="top">
                        This is some content <br />
                        This is some content <br />
                        This is some content <br />
                        This is some content <br />
                        This is some content <br />
                        This is some content <br />
                        This is some content <br />
                    </td>
                    <td valign="top" align="right"><img src="http://hirenshah.co.uk/poc/logo.png" width="100px" height="75px"/></td>
                </tr>
            </table>
            
             <table class="hello1">
                <tr>
                    <td>Table 1</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

CSS

.hello1 {
      float:left;
      background:pink;
    width:300px;
  }
  .hello2 {
      float:right;
      background:yellow;
    width:300px;
  }

    .container {
    vertical-align:bottom;}

@media screen and (min-width: 601px) {
    .container {
        width:600px !important;
        vertical-align:bottom;
    }