JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="item">
      <table width="500px">
        <tr><td>Header</td></tr>
      </table>
    </div>
</div>
<div id="container">
    <div class="item scroll">
      <div class="bigContent">
         <table width="500px">
            <tr><td>Some content</td></tr>
         </table>
      </div>      
    </div>
</div>

CSS

#container {
    background-color: green;
    display: flex;
    /*overflow: auto;*/
}
.item {
    background-color: white;
    border: 1px solid black;
    flex-grow: 0;
}


.item:first-child {
    margin-left: auto;
}
.item:last-child {
    margin-right:auto;
}

.bigContent{
  height: 1000px;
}

.scroll{
  overflow: auto;
  height: 300px;
}