JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer" class="exDiv">
    Outer
    <div id="inner" class="exDiv">
        Inner
    </div>
</div>
<button id="destroyButton">Destroy example</button>
<button id="disableButton">Disable example</button>

CSS

#outer{
    width: 400px;
    height: 400px;
}

#inner{
    width: 200px;
    height: 200px;
}
.exDiv{
    border: 1px solid black;
}

JavaScript

$(function(){
    $("#destroyButton").click(function(){
        //Should this only remove resizable on the outer div?
        $("#outer").resizable("destroy");
    });
    
    $("#disableButton").click(function(){
        //Should this only disable the outer div?
        $("#outer").resizable("option", "disabled", true);
    });    
    
    $("#inner, #outer").resizable();
});