JSFiddle - React, Tailwind, and code Playground

by Denis

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="res"></div>
<div id="resizable" class="ui-widget-content"></div>

CSS

#resizable{
    margin: 10px;
    width: 150px;
    height: 150px; 
    padding: 0.5em;
    border: 1px solid #CCC;
}
#res b {
    color: #060;    
}

JavaScript

var dChar = null,
    direction = {
    'n':'верхню',
    'e':'правую',
    's':'нижнюю',
    'w':'левую'
    
};
$( "#resizable" ).on('mousedown', function(e){
    dChar = $(e.target).attr('class').substr(-1);
});
$( "#resizable" ).resizable({
    handles : 'n, e, s, w',
    stop: function(){
        $('#res').html('Тянули за <b>' + direction[dChar] + '</b> границу');
    }
});