JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table-holder left-table">
  <table>
  <tr><th>1</th><th>2</th></tr>
  </table>
</div>
<div class="table-holder right-table">
  <table>
  <tr><th>1</th><th>2</th></tr>
  <tr><td>33</td><td>xx</td></tr>
  <tr><td>33</td><td>xx</td></tr>
  <tr><td>33</td><td>xx</td></tr>
  <tr><td>33</td><td>xx</td></tr>
  </table>
</div>
<div class="clear"></div>
<div class="table-holder left-table">
  <table>
  <tr><th>1</th><th>2</th></tr>
  </table>
</div>
<div class="table-holder right-table">
  <table>
  <tr><th>1</th><th>2</th><th>3</th></tr>
  </table>
</div>
<div>
other content
</div>

CSS

.table-holder {
  width:50%;
}
.left-table {
  float:left;
}
.right-table {
  float:right;
}
.clear {clear:both;}
.table-holder table {width:100%;}
table th, table td {border:1px solid red;}