JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
    $(function() {
        $("#resizeBox").resizable({
            handles: {
                'e': '#resize-drag-handle'
            },
            autoHide: true
        });
    });

    function enableResize() {
        $("#resizeBox").resizable("enable");
    }

    function disableResize() {
        $("#resizeBox").resizable("disable");
    }
</script>
	<body>       
		<div id="outer">
			<button type="button" onclick="disableResize();">Disable</button>
		</div>
		
		<div id="resizeBox" class="ui-widget-content">
			<div id="ui-button">
				<button type="button" onclick="enableResize();">Enable</button>
				<button type="button" onclick="disableResize();">Disable</button>
			</div>
			
			<div id="resize-drag-handle" class="ui-resizable-handle ui-resizable-e"/>
		</div>
	</body>

CSS

#resizeBox {
    width: 150px;
    height: 150px;
    padding: 0.5em;
    ui-button {
        width: 50px;
        height: 20px;
        float: left;
    }
}
#resize-drag-handle:hover {
    background-color: red;
}