JSFiddle - React, Tailwind, and code Playground
HTML
<div class="SplitContainer">
<div class="ContentPane">
Some Text
</div>
<div class="Divider"></div>
<div class="ContentPane">
Other Text
</div>
</div>
CSS
.SplitContainer {
background: #eee;
height: 300px;
position: relative;
}
.SplitContainer.dragging {
cursor: move;
}
.ContentPane {
background: white;
border: 1px solid #ccc;
bottom: 0px;
box-sizing: border-box;
display: block;
overflow: hidden;
position: absolute;
top: 0px;
}
.Divider {
background: #ddd;
bottom: 0px;
cursor: move;
display: block;
position: absolute;
top: 0px;
width: 5px;
}
JavaScript
// Variable Setup
var splitContainerWidth = $('.SplitContainer').width();
var divider = $('.Divider');
var firstContentPane = $('.SplitContainer .ContentPane').eq(0);
var secondContentPane = $('.SplitContainer .ContentPane').eq(1);
var contentPaneMinWidth = 50;
var dividerWidth = divider.width();
firstContentPane.css('left', '0px');
secondContentPane.css('right', '0px');
var lastDividerX = 0;
var isDragging = false;
var dragStartX = 0;
var splitContainerPageX = $('.SplitContainer').offset().left;
// Resize the content panes based on divider x position
function resize(dividerX) {
lastDividerX = dividerX;
firstContentPane.css('right', splitContainerWidth - dividerX);
divider.css('left', dividerX);
secondContentPane.css('left', dividerX+dividerWidth);
}
// Initial Divider Position
resize(200);
// Attach events to divider for resizing
$('.Divider').on('mousedown', function(e) {
$('.SplitContainer').addClass('dragging');
isDragging = true;
});
$(document).on('mouseup', function() {
$('.SplitContainer').removeClass('dragging');
isDragging = false;
});
$(document).on('mousemove', function(e) {
if (isDragging) {
resize(Math.min(splitContainerPageX + splitContainerWidth - dividerWidth - contentPaneMinWidth, Math.max(contentPaneMinWidth, e.pageX - splitContainerPageX - (dividerWidth/2))));
}
});
// Window resize
$(window).on('resize', function() {
splitContainerPageX = $('.SplitContainer').offset().left;
splitContainerWidth = $('.SplitContainer').width();
resize(Math.min(lastDividerX, splitContainerPageX + splitContainerWidth - dividerWidth - contentPaneMinWidth));
});