JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div class="top"></div>
  <div class="middle">
    <div class="inner-window" id="left">
      <table>
					<thead>
						<tr>
							<th>Header One</th>
							<th>Header Two</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>a</td>
							<td>b</td>
						</tr>
						<tr>
							<td>a</td>
							<td>b</td>
						</tr>
						<tr>
							<td>a</td>
							<td>b</td>
						</tr>
						<tr>
							<td>a</td>
							<td>b</td>
						</tr>
						<tr>
							<td>a</td>
							<td>b</td>
						</tr>
						<tr>
							<td>a</td>
							<td>b</td>
						</tr>
            <tr>
							<td>a</td>
							<td>b</td>
						</tr>
						<tr>
							<td>a</td>
							<td>b</td>
						</tr>
						<tr>
							<td>a</td>
							<td>b</td>
						</tr>
						<tr>
							<td>a</td>
							<td>b</td>
						</tr>
						<tr>
							<td>a</td>
							<td>b</td>
						</tr>
						<tr>
							<td>a</td>
							<td>b</td>
						</tr>
            <tr>
							<td>a</td>
							<td>b</td>
						</tr>
						<tr>
							<td>a</td>
							<td>b</td>
						</tr>
						<tr>
							<td>a</td>
							<td>b</td>
						</tr>
						<tr>
							<td>a</td>
							<td>b</td>
						</tr>
						<tr>
							<td>a</td>
							<td>b</td>
						</tr>
						<tr>
							<td>a</td>
							<td>b</td>
						</tr>
            <tr>
							<td>a</td>
							<td>b</td>
						</tr>
						<tr>
							<td>a</td>
							<td>b</td>
						</tr>
						<tr>
							<td>a</td>
							<td>b</td>
						</tr>
						<tr>
							<td>a</td>
							<td>b</td>
						</tr>
						<tr>
							<td>a</td>
							<td>b</td>
						</tr>
						<tr>
							<td>a</td>
							<td>b</td>
						</tr>
           ...

CSS

body {
  background-color: pink;
  padding: 0;
  margin: 0;
}

.wrap {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}

.top {
  background-color: red;
  height: 100px;
}

.middle {
  background-color: lightblue;
  flex: 1;
  display: flex;
  overflow:auto;
}

.bottom {
  background-color: green;
  height: 100px;
}

.inner-window {
  background-color: peachpuff;
  width: 45%;
  flex: 1;
  overflow:auto;
}

#left {
  margin-right: 5%;
}

#right {
  margin-left: 5%;
}