JSFiddle - React, Tailwind, and code Playground

by g30rg3

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure-min.css">
<div data-template-body>
    <div data-container class="pure-g-r" style="background:#ccc; padding:10px;">
        <div data-section class="pure-u-1" style="background:#ddeaf2; width:100%;">
            <div data-block data-block-type="TextImage" data-block-layout-1column>
                <section>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor. Epsum factorial non deposit quid pro quo hic escorol.</p>
                </section>
                <div class="ActionDiv"></div>
            </div>
            <div class="ActionDiv"></div>
        </div>
    </div>
    <div data-container class="pure-g-r" style="background:#ccc; padding:10px;">
        <div data-section class="pure-u-1-2" style="background:#ddeaf2; width:40%;">
            <div data-block data-block-type="TextImage" data-block-layout-1column>
                <section>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor. Epsum factorial non deposit quid pro quo hic escorol.</p>
                </section>
                <div class="ActionDiv"></div>
            </div>
            <div data-block data-block-type="TextImage" data-block-layout-1column>
                <section>
                    <p>Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline...

CSS

[data-container] {
    position:relative;
    width: 100%;
    display: table;
    table-layout: fixed;
    box-sizing:border-box;
}
[data-section] {
    word-wrap: break-word;
    display: table-cell;
    box-sizing:border-box;
    /*padding:20px;*/
    position:relative;
}
[data-section]:hover, [data-section].active {
    outline:3px dashed #9AACC6;
    position:relative;
    z-index:1;
}
[data-section]:hover .dragbar, [data-section].active .dragbar {
    display:block;
}
[data-container].full .dragbar, [data-container].dragging .handle {
    display:none;
}
.dragbar {
    /*display:none;*/
    position:absolute;
    width: 10px;
    margin-left:-5px;
    top:0;
    bottom:0;
    cursor: col-resize;
}
.dragbar .handle {
    background:#fff;
    border:2px solid #999;
    height:16px;
    width:16px;
    display:block;
    border-radius:10px;
    position:absolute;
    top:50%;
    left:50%;
    margin:-10px 0 0 -10px;
}
.dragbar.left {    
}
.dragbar.right {
    
}

@media (max-width: 767px) {
    .pure-g-r>.pure-u, .pure-g-r>[class *="pure-u-"] {
        width: 100% !important;
        display:block;
    }
    [data-container] [data-section]:hover .dragbar, [data-container] [data-section].active .dragbar {
        display:none;
    }
}

JavaScript

var i = 0;
var dragging = false;
var position = 0;
var activeSection;
var activeContainer;
var activeDragbar;

$('.dragbar').mousedown(function (e) {
    e.preventDefault();

    dragging = true;
    position = $(this).offset().left;
    activeSection = $(this).closest('[data-section]');
    activeSection.addClass('active');
    activeContainer = $(this).closest('[data-container]');
    activeDragbar = $(this);
    activeContainer.addClass('dragging');

    $(document).mousemove(function (e) {
        position = ((e.pageX) - (activeContainer.offset().left));

        if (activeDragbar.hasClass("left")) {
            var workingWidth = (activeSection.outerWidth()) + (activeSection.prev().outerWidth());
            var workingPercent = Math.round((workingWidth / (activeContainer.width())) * 100);
            var newWidth = Math.round((((position) - (parseInt(activeSection.prev().offset().left)) + (parseInt(activeContainer.offset().left))) / (activeContainer.width())) * 100) + "%";

            if (parseInt(newWidth) < 20) {
                newWidth = "20%";
            } else if (workingPercent - (parseInt(newWidth)) < 20) {
                newWidth = workingPercent - 20 + "%";
            }
            activeSection.prev().css("width", newWidth);
            
            var remainingWidth = Math.round((((workingWidth) - (activeSection.prev().outerWidth())) / (activeContainer.width())) * 100) + "%";
            
            activeSection.css("width", remainingWidth);
        } else {
            var workingWidth = (activeSection.outerWidth()) + (activeSection.next().outerWidth());
            var workingPercent = Math.round((workingWidth / (activeContainer.width())) * 100);
            var newWidth = Math.round((((position) - (parseInt(activeSection.offset().left)) - (parseInt(activeContainer.offset().left))) / (activeContainer.width())) * 100) + "%";
            
            if (parseInt(newWidth) < 20) {
                newWidth = "20%";
            } else if...