JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<body>

 
    <div class="pane pane--table1">
        <div class="pane-hScroll">
            <table>
                <thead>
                <th style="text-align: center;">Header1</th>
                <th style="text-align: center;">Header2</th>
                <th style="text-align: center;">Header3</th>
      
                </thead>
            </table>
            <div class="pane-vScroll">
                <table>
                    <tbody>
                    <tr>
                        <td style="text-align: center;">Dataaaa</td>
                        <td style="text-align: center;">Data</td>
                        <td style="text-align: center;">Data</td>
                     </tr>
                        <tr>
                        <td style="text-align: center;">Dataaaa</td>
                        <td style="text-align: center;">Data</td>
                        <td style="text-align: center;">Data</td>
                     </tr>
                        <tr>
                        <td style="text-align: center;">Dataaaa</td>
                        <td style="text-align: center;">Data</td>
                        <td style="text-align: center;">Data</td>
                     </tr>
                        <tr>
                        <td style="text-align: center;">Dataaaa</td>
                        <td style="text-align: center;">Data</td>
                        <td style="text-align: center;">Data</td>
                     </tr>   <tr>
                        <td style="text-align: center;">Dataaaa</td>
                        <td style="text-align: center;">Data</td>
                        <td style="text-align: center;">Data</td>
                     </tr> <tr>
                        <td style="text-align:...

CSS

* {
        box-sizing: border-box;
    }
    body {
        font: 14px/1 Arial, sans-serif;
    }
    table {
        border-collapse: collapse;
        background: white;
        table-layout: fixed;
        width: 100%;
    }
    th, td {
        padding: 8px 16px;
        border: 1px solid #ddd;
        width: 160px;
        overflow: hidden;
        white-space: nowrap;
    }
    .pane {
        background: #eee;
    }
    .pane-hScroll {
        overflow: auto;
    }
    .pane-vScroll {
        overflow-y: auto;
        overflow-x: hidden;
        height: 150px;
    }
 
    table { table-layout:fixed;width: 100% }
    td {
        white-space: -o-pre-wrap;
        word-wrap: break-word;
        white-space: pre-wrap;
        white-space: -moz-pre-wrap;
        white-space: -pre-wrap;

    }

JavaScript

function setTableWidth(){
    if( $('.pane-vScroll').prop('scrollHeight') >$('.pane-vScroll').height()){
       var width = $('.pane-vScroll table').width();  
       $('.pane-hScroll table:first').width( width);
    } 

}
$(function(){
  setTableWidth();
  $(window).resize(function () {
    setTableWidth();
  })

})