JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

    <body>
        <table class="table table-condensed scrollable">
            <thead>
                <tr>
                    <th colspan="4">Application and SecurityEvent Log</th>
                </tr>
                <tr>
                    <th class="col-md-1 header-row">Time</th>
                    <th class="col-md-5 header-row">Source</th>
                    <th class="col-md-6 header-row">Message</th>
                </tr>
            </thead>
            <tbody id="logEventsApp" class="scrollable">  
                <tr id="13705" class="warning">
                    <td>10:23</td>
                    <td>IIS Express</td>
                    <td>3</td>
                    <td>null</td>
                </tr>
                <tr id="13704" class="warning">
                    <td>10:20</td>
                    <td>TestLog</td>
                    <td>4</td>
                    <td>null</td>
                </tr>      
            </tbody>
<tbody id=scroller><tr><td colspan=3></td></tr></tbody>
            <tbody id="logEventsSec" class="scrollable">  
                <tr id="2345" class="warning">
                    <td>10:21</td>
                    <td>Security error</td>
                    <td>3</td>
                    <td>null</td>
                </tr>
                <tr id="142604" class="warning">
                    <td>10:20</td>
                    <td>TestLog</td>
                    <td>4</td>
                    <td>null</td>
                </tr>      
            </tbody>
        </table>
    </body>

CSS

.scrollable table {
    border-collapse: collapse;
    width: 100%;
}

.scrollable thead {
    text-align: left;
    display: table;
    float: left;
    width: 100%;
}

.scrollable thead tr {
    display: table-row;
    width: 100%;
}

.scrollable tbody {
    display: block;
    height: 20px;
    overflow: auto;
    float: left;
    width: 100%;
}

.scrollable tbody tr {
    display: table;
    width: 100%;
}

.scrollable tbody tr {
    height: 18px;
}

#scroller{
height:10px;
background-color:gray;
cursor:pointer;
}

JavaScript

document.getElementById('logEventsApp').style.height=document.getElementById('logEventsApp').offsetHeight+'px';
document.getElementById('logEventsSec').style.height=document.getElementById('logEventsSec').offsetHeight+'px';
console.log(document.getElementById('logEventsApp').style.height);

tracking=false;
document.onmousemove = function (e) {
//console.log(e);
mouseX=e.clientX;
mouseY=e.clientY;
if (tracking===true)
{
console.log(document.getElementById('logEventsApp').style.height);
console.log(start-mouseY);
document.getElementById('logEventsApp').style.height=logEventsAppHeight-(start-mouseY)+'px';
document.getElementById('logEventsSec').style.height=logEventsSecHeight+(start-mouseY)+'px';
}
//console.log(mouseY);
};

document.getElementById('scroller').onmousedown=function () {
tracking=true;
start=mouseY;
logEventsAppHeight=parseInt(document.getElementById('logEventsApp').style.height);
logEventsSecHeight=parseInt(document.getElementById('logEventsSec').style.height);
};

document.getElementById('scroller').onmouseup=function () {
tracking=false;
};