JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<div class="parent">
    <div class="leftChild column">
        This is left window
    </div>
    <div class="rightChild column">
        This is right window
    </div>
</div>

CSS

.parent {
	position: relative;
    width: 100%;
    height: 300px;
    border: 2px solid black;
}
.column {
	height: 100%;
}
.leftChild {
	position: absolute;
    left: 7px;
    border-right: 2px solid red;
    width: 30%;
}
.rightChild {
	position: absolute;
    right: 7px;
    border-left: 2px solid blue;
}

JavaScript

$(function() {  
    $('.rightChild').width($('.parent').width() - $('.leftChild').width() - 20);
    $(".leftChild" ).resizable({
        handles: 'e',         // 设置resize的方向 North, Sourth, West, East
        maxWidth: 450,
        minWidth: 100
    });
    $('.leftChild').resize(function() {
        $('.rightChild').width($('.parent').width() - $('.leftChild').width() - 20);
    });
})