JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="page-body">
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="/">Home</a>
</div>
</nav>
<div class="container-fluid h-25">
<div class="row justify-content-around h-25">
<div class="col">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th colspan="2" style="text-align:center">System Status</th>
</tr>
<tr>
<th>Active Jobs</th>
<th>Queued Jobs</th>
</tr>
</thead>
<tbody>
<td></td>
<td></td>
</tbody>
</table>
</div>
<div class="col overflow-scroll">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th colspan="3" style="text-align:center">Recently Executed Tasks</th>
</tr>
<tr>
<th>Job</th>
<th>Task</th>
<th>Start Time</th>
</tr>
</thead>
<tbody>
<tr>
<td>Job B</td>
<td>Task X</td>
<td>06.06.2022 15:31:17</td>
</tr>
<tr>
<td>Job B</td>
<td>Task X</td>
<td>06.06.2022 15:31:17</td>
</tr>
<tr>
<td>Job B</td>
<td>Task X</td>
<td>06.06.2022 15:31:17</td>
</tr>
<tr>
...
CSS
.page-body {
width: 100vw;
height: 100vh;
}