JSFiddle - React, Tailwind, and code Playground

by stevea

HTML

<div id='box'>
    <div id='innerBox'></div>
</div>
<button id="destroyResize">Destroy Resize</button>

CSS

div#box {
    width:500px;
    height:200px;
    border:1px solid black;
    position: absolute;
    top:150px;
    left:150px;
    background-color:beige;
}
div#innerBox {
    width:100px;
    height:100px;
    border:1px solid black;
    position: relative;
    top:30px;
    left:30px;
    background-color:brown;
}

JavaScript

$(function(){
    $('div#box').resizable({handles : 'n,e,s,w'});
    $('div#innerBox').resizable({handles : 'n,e,s,w'});
    
    $('button#destroyResize').click(function(){
                      $('div#box').resizable('destroy');
                       });
});