Demo of Resizable with containment using JQuery UI

Full Code

<script>
$(document).ready(function() {
//////////////////////////
$( "#resize_id" ).resizable({
containment: 'parent'
});
/////////
var present_class = $( "#resize_id" ).resizable( "option", "containment" );
$('#d1').html( " <b>Status of containment:</b> " + present_class );
//////////
$("input:radio[name=r1]").click(function() {
sel=$(this).val();
$( "#resize_id" ).resizable( "option", "containment", sel );
var present_class = $( "#resize_id" ).resizable( "option", "containment" );
$('#d1').html( " <b>Status of containment:</b> " + present_class );
})
///////
})
</script>

<table class='table'>
<tr><td><input type='radio' name='r1' id='r1' value='parent' checked>Parent</td>
<td><input type='radio' name='r1' id='r2' value='document'>document</td>
</tr></table>

<br><button type='button' class='btn btn-secondary'  id=d1></button>

<br><br>

<div class='row'> <div class='col-md-6'>

<div id="resize_id" class=resize_cl></div>
</div><div class='col-md-6'>This is next cell area , resizable element can't extend upto this area with <i>Parent</i> selection.<br><br>
</div></div>