JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
</head>
    
<body>
    
    <div id="container">
      <div id="topleft">topleft</div>
      <div id="topright">topright</div>
      <div id="leftbar">left</div>
      <div id="rightbar">
         <table id="test"></table>       
      </div>
   </div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>

</body>

</html>

CSS

body {       
}

table tr td,
table tr th {
    border: 1px solid #ccc;        
}

table thead th {
    font-weight: bold;
}

#container {
    width: auto;
    display: grid;
    grid-template-areas:  "topleft topright"
                          "leftbar rightbar";
    grid-template-columns: 100px auto; /* works if this is a set size like 100px 400px */
    grid-template-rows: 100px 200px;
    margin: 50px;   
    border: 1px solid red;
}

JavaScript

$('#test').dataTable({
        //"sScrollY": "200px",
        "scrollX": true,
        //"bScrollCollapse": true,
        columns: [
        {"title":"test123456789","data":"id"},
        {"title":"test123456789","data":"id"},
        {"title":"test123456789","data":"id"},
        {"title":"test123456789","data":"id"},
        {"title":"test123456789","data":"id"},
        {"title":"test123456789","data":"id"},
        {"title":"test123456789","data":"id"},
        {"title":"test123456789","data":"id"},
        {"title":"test123456789","data":"id"},
        {"title":"test123456789","data":"id"},
        {"title":"test123456789","data":"id"},
        {"title":"test123456789","data":"id"},
        {"title":"test123456789","data":"id"},
        {"title":"test123456789","data":"id"},
        {"title":"test123456789","data":"id"},
        {"title":"test123456789","data":"id"},
        {"title":"test123456789","data":"id"},
        {"title":"test123456789","data":"id"}
        ]
    });
let json = [{"id":"abc"}];
$('#test').dataTable().fnAddData(json);