JSFiddle - React, Tailwind, and code Playground
HTML
<div class="main">
<div class="left">
<table>
<tr>
<td>"left"</td>
</tr>
<tr>
<td>"left"</td>
</tr>
<tr>
<td>"left"</td>
</tr>
<tr>
<td>"left"</td>
</tr>
<tr>
<td>"left"</td>
</tr>
<tr>
<td>"left"</td>
</tr>
<tr>
<td>"left"</td>
</tr>
<tr>
<td>"left"</td>
</tr>
<tr>
<td>"left"</td>
</tr>
<tr>
<td>"left"</td>
</tr>
</table>
</div>
<div class="right">
<div class="top_right">
<table>
<tr>
<td>"bottom_right"</td>
<td>"bottom_right"</td>
<td>"bottom_right"</td>
<td>"bottom_right"</td>
<td>"bottom_right"</td>
<td>"bottom_right"</td>
<td>"bottom_right"</td>
<td>"bottom_right"</td>
<td>"bottom_right"</td>
<td>"bottom_right"</td>
<td>"bottom_right"</td>
<td>"bottom_right"</td>
<td>"bottom_right"</td>
<td>"bottom_right"</td>
<td>"bottom_right"</td>
<td>"bottom_right"</td>
<td>"bottom_right"</td>
<td>"bottom_right"</td>
<td>"bottom_right"</td>
<td>"bottom_right"</td>
<td>"bottom_right"</td>
<td>"bottom_right"</td>
<td>"bottom_right"</td>
<td>"bottom_right"</td>
<td>"bottom_right"</td>
<td>"bottom_right"</td>
...
CSS
html, body {
height:100%;
}
.main {
height: 600px;
background-color: lightblue;
margin: 50px 50px;
}
.left {
float: left;
background-color: pink;
height: 600px;
}
.right {
width:500px;
background-color:purple;
overflow-x: scroll;
overflow-y: scroll;
height: 600px;
}
.