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>