JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<!--
<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
-->

<img src="http://placekitten.com/200/200"/>
<br />
<a href="#">Enable</a>

CSS

.ui-wrapper {
    position : relative!important;
}

.ui-resizable-se {
    position : absolute;
    bottom   : 0;
    right    : 0;
    width    : 6px;
    height   : 6px;
    background-color : white;
    border:  1px solid black;
    cursor: se-resize;
}

img {
    border: 5px solid red;
}

JavaScript

var active = false;
var resizedImage = null;
var OriginalImg = $('img');
$('a').click(function() {
    if(active) {
        var p = $(resizedImage).css('position');
        var w = $(resizedImage).innerWidth();
        var h = $(resizedImage).innerHeight();
        var top = $(resizedImage).css('top');
        var left = $(resizedImage).css('left');

        OriginalImg.resizable('destroy');
        OriginalImg.css({
                position: p,
                width: w,
                height: h,
                top: top,
                left: left
            });
        $('a').text('Enable');
    } else {
        resizedImage = OriginalImg.resizable();
        $('a').text('Disable');
    }
    active = !active;
});