JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div id="table">
    <table>
      <tr>
        <td>test</td>
        <td>test</td>
      </tr>
      <tr>
        <td>test</td>
        <td>test</td>
      </tr>
      <tr>
        <td>test</td>
        <td>test</td>
      </tr>
      <tr>
        <td>test</td>
        <td>test</td>
      </tr>
      <tr>
        <td>test</td>
        <td>test</td>
      </tr>
      <tr>
        <td>test</td>
        <td>test</td>
      </tr>
      <tr>
        <td>test</td>
        <td>test</td>
      </tr>
      <tr>
        <td>test</td>
        <td>test</td>
      </tr>
      <tr>
        <td>test</td>
        <td>test</td>
      </tr>
      <tr>
        <td>test</td>
        <td>test</td>
      </tr>
      <tr>
        <td>test</td>
        <td>test</td>
      </tr>
      <tr>
        <td>test</td>
        <td>test</td>
      </tr>
    </table>
  </div>
  <div id="status">
    Status
  </div>
</div>

CSS

body {
  height: 95vh;
  width: 98vw;
  font-size: 3vmin;
}
table, td {
   border: 1px solid red;
}
table {
   height: 100%;
   width: 100%;
}
#container {
  border:2px solid grey;
  height: 100%;
  width: 100%;
}
#table {
  border:1px solid blue;
  height: 80%;
}
#status {
  border:1px solid blue;
  height: 19%;
}