JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//datatables.net/download/build/nightly/jquery.dataTables.css">
<script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
<body>
    <div id="region1">
        <button type="button">Click Me!</button>
    </div>
    <div id="region2" hidden="hidden">
        <h4>Click in the header element to see the table resize itself and correct the fault.</h4>
        <div class="container">
            <table id="example" class="display" width="100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tiger Nixon</td>
                        <td>System Architect</td>
                        <td>Edinburgh</td>
                        <td>61</td>
                        <td>2011/04/25</td>
                        <td>$3,120</td>
                    </tr>
                    <tr>
                        <td>Garrett Winters</td>
                        <td>Director</td>
                        <td>Edinburgh</td>
                        <td>63</td>
                        <td>2011/07/25</td>
                        <td>$5,300</td>
                    </tr>
                    <tr>
                        <td>Ashton Cox</td>
                        <td>Technical Author</td>
                        <td>San Francisco</td>
                        <td>66</td>
                        <td>2009/01/12</td>
                        <td>$4,800</td>
                    </tr>
                    <tr>
                        <td>Cedric Kelly</td>
                        <td>Javascript Developer</td>
                        <td>Edinburgh</td>
                        <td>22</td>
  ...

CSS

body {
    font: 90%/1.45em"Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
}
div.container {
    min-width: 980px;
    margin: 0 auto;
}

JavaScript

$(document).ready(function () {
    $('#region1').click(function() {
        $('#region1').hide();
        $('#region2').show();
        // Uncomment the following line to work around the issue.
        //$('#example').DataTable().columns.adjust().draw();
    });
    
    var table = $('#example').DataTable({
        scrollY: 300 // Comment out this line and the problem doesn't occur.
    }).columns.adjust().draw();
});