Demo of Resizable using JQuery UI

We can resize the element by dragging the right side or bottom borders of above element. The element will resize itself and take the new shape.

Tutorial Resizable

Full Code

<html>
<HEAD>
<link href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css' rel='stylesheet'>
  <style>
  #resize_id { 
position: relative;
width:90px;
height: 85px;
background-color: #f1f1f1;
border: 1px solid blue;
}	</style>
</HEAD>
<BODY>
<br><br>

<br>
<div id=resize_id></div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"  ></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" ></script>

<script>
$(document).ready(function() {
////////////////
$( "#resize_id" ).resizable();
////
})
</script>
</BODY>
</HTML>