JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<button class="edit">Edit</button><button class="save">Save</button>

<br /><br />
<div id="sidebar"></div><div id="content"></div>

CSS

#sidebar {
    width: 270px;
    height: 400px;
    background: #e5e5e5;
    border: solid 1px #000;
    display: inline-block;
}

#content {
    width: 270px;
    height: 400px;
    background: #e5e5e5;
    border: solid 1px #000;
    display: inline-block;
}

.reBar {
    height: 400px;
    width: 1px;
    background: #454545;
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
    cursor: e-resize;
}

.save {
    display: none;
}

JavaScript

$(function() {

    $('.edit').click(function() {
        $('<div class="reBar draggable ui-widget-content"></div>').insertAfter('#sidebar');
        $('.edit').hide();
        $('.save').show();
        $('.reBar').draggable({
            axis: "x",
            drag: function() {
                var move = $('.reBar').css('left');
                var sideBarWidth = $('#sidebar').width();
                var newWidth = sideBarWidth + parseInt(move);
                $('#sidebar').width(newWidth);

            }
        });
    });

    $('.save').click(function() {
        $('.reBar').remove();
        $('.edit').show();
        $('.save').hide();
    });

});