JSFiddle - React, Tailwind, and code Playground

by apaul34208

HTML

<div id="divAll">
    <div id="div1">
        <table id="tbl1">
            <tr>
                <td>top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top toptop top top top top top top top top top top top top top top top top top top top top top top toptop top top top top top top top top top top top top top top top top top top top top top top top</td>
            </tr>
        </table>
    </div>
    <div id="resizable">
        <table id="tbl2">
            <tr>
                <td>bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom bottom</td>
            </tr>
        </table>
    </div>
</div>

CSS

#divAll {
    height:500px;
    width:500px;
    border:1px solid blue;
}
#div1 {
    height:60%;
    width:100%;
    border:1px dotted green;
    overflow:auto;
    min-height:50px;
    max-height:450px;
    background-color: #eee;
}
#resizable {
    height:184px;
    border:1px dotted red;
    overflow:auto;
    background-color: yellow;
    padding:6px;
}
#tbl1, #tbl2 {
    word-wrap:break-word;
}
.ui-resizable-handle {
    cursor: row-resize;
    background: url(http://jsfiddle.net/img/handle-h.png) 50% 4px no-repeat;
    border:1px solid grey;
    margin:0 -2px;
    height:10px;
    position:absolute;
    top:0;
}

JavaScript

$(function () {
    $("#resizable").resizable({
        handles: "n",
        maxHeight: 450,
        minHeight: 50
    });
    $("#resizable").scroll(function () {
        $(".ui-resizable-handle").css('top', $("#resizable").scrollTop());
    });
});