JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container2">
  <div>
  <ul>
  <li>
    <div class="item2"></div>
  </li>
  </ul>
  
  </div>
    
</div>

CSS

.container2 {
    min-width:300px;
    min-height:200px;
    outline:1px solid black;
}
.item2 {
    width:50px;
    height:50px;
    background-color:red;
}

JavaScript

$(".container2").resizable({
    stop: reCalcBounds
});

$(".item2").draggable({
    create: reCalcBounds
}).resizable({
    containment: ".container2"    
});

function reCalcBounds(){
 var $item =  $(".item2");
     $container = $(".container2");
 var containmentX1 = $container.offset().left;
        var containmentY1 = $container.offset().top;
        var containmentX2 = ($container.outerWidth() + $container.offset().left - $item.outerWidth())
        var containmentY2 = ($container.outerHeight() + $container.offset().top -$item.outerHeight())
        $item.draggable("option", "containment", [containmentX1, containmentY1, containmentX2, containmentY2]);

}