JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<button>Resize!</button>
<div id="resizable"></div>
<div id="other" class="other"></div>
<div id="other2" class="other"></div>
<div id="other3" class="other"></div>

CSS

#resizable, .other {
    width: 100px;
    height: 100px;
    background: #ccc;
}
.other {
    background: #666;
    border: solid 1px white;
}

JavaScript

$.widget("ui.resizable", $.ui.resizable, {
    resizeBy: function(newSize) {
        this._mouseStart($.Event("mousedown", { pageX: 0, pageY: 0 }));
        this.axis = 'se';
        var end = $.Event("mouseup", {
            pageX: newSize.width,
            pageY: newSize.height
        });
        this._mouseDrag(end);
        this._mouseStop(end);
    }
});
$("#resizable").resizable({
    alsoResize: '#other, #other2, #other3',
    resize: function(event, ui) {
        console.log('resize called');
    }
});
$('button').click(function() {
    $('#resizable').resizable("resizeBy", {
        height: 10, 
        width: 20 
    });
});