JSFiddle - React, Tailwind, and code Playground

by javadoug

HTML

<div class="resize row">
    <div class="overx">
        <div class="resize column">
            <div class="overy">
                <div>A line here</div>
                <div>A line here</div>
                <div>A line here</div>
                <div>A line here</div>
                <div>A line here</div>
                <div>A line here</div>
            </div>
        </div>
        <div class="resize column">
            <div class="overy">
                <div>A line here</div>
                <div>A line here</div>
                <div>A line here</div>
                <div>A line here</div>
                <div>A line here</div>
                <div>A line here</div>
                <div>A line here</div>
                <div>A line here</div>
            </div>
        </div>
    </div>
</div>

CSS

.row {
    width: 500px;
    height: 100px;
    border: 1px solid red;
}
.column {
    width: 200px;
    border-right: 1px solid red;
}
.ui-resizable-handle {
    border: 2px solid green;
    background: green;
}
.ui-resizable-e {
    height: 100%;
}
.ui-resizable-s {
    width: 100%;
}

.resize {
    overflow: hidden;
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
    padding: 0 6px 6px 0;
}
.overy {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
.overx {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

JavaScript

//http://visualpulse.net/forums/index.php?topic=120.0
// Find the width of the native scrollbar
var wide_scroll_html = '<div id="wide_scroll_div_one" style="width:50px;height:50px;overflow-y:scroll;position:absolute;top:-200px;left:-200px;"><div id="wide_scroll_div_two" style="height:100px;width:100%"></div></div>';
$("body").append(wide_scroll_html);
var scroll_bar_width = $("#wide_scroll_div_one").width() - $("#wide_scroll_div_two").innerWidth();
$("#wide_scroll_div_one").remove();

function get_scrollbar_adjustment(n) {
    return n.scrollWidth > n.clientWidth ? scroll_bar_width : 0;
}

function dostart() {
    $(this).find('.overy').css('overflow-y', 'hidden');
}

function dostop() {
    $(this).find('.overy').css('overflow-y', 'auto');
}

function dostope() {
    doresize.apply($('.row')[0]);
}

function doresize() {
    var adj = get_scrollbar_adjustment($(this).find('.overx')[0]);
    $(this).find('.resize').css('height', $(this).height() - adj);
}
$('.row').resizable({
    handles: 's',
    resize: doresize,
    start: dostart,
    stop: dostop
});
$('.column').resizable({
    handles: 'e',
    resize: dostope
});
// initialize the heights so the handles and scrollbars paint correctly
doresize.apply($('.row')[0]);