Create a resizable div with a resizer at bottom right of div

 CSS 

Cursor: se-resize

If the value of the cursor property is set to se-resize, the cursor will look like an arrow having heads on both of the sides, pointing towards the south-east.

https://www.w3resource.com/css/user-interface/se-resize.php

https://stackoverflow.com/questions/8960193/how-to-make-html-element-resizable-using-pure-javascript

HTML
<p>Click to make me resizable</p>

CSS

p { background: lime; height: 200px; width: 300px; }

p.resizable { background: cyan; position: relative; }

p .resizer { width: 10px; height: 10px; background: blue; position:absolute; right: 0; bottom: 0; cursor: se-resize; }

JS:

var p = document.querySelector('p');

p.addEventListener('click', function init() {

    p.removeEventListener('click', init, false);

    p.className = p.className + ' resizable';

    var resizer = document.createElement('div');

    resizer.className = 'resizer';

    p.appendChild(resizer);

    resizer.addEventListener('mousedown', initDrag, false);

}, false);

var startX, startY, startWidth, startHeight;

function initDrag(e) {

   startX = e.clientX;

   startY = e.clientY;

   startWidth = parseInt(document.defaultView.getComputedStyle(p).width, 10);

   startHeight = parseInt(document.defaultView.getComputedStyle(p).height, 10);

   document.documentElement.addEventListener('mousemove', doDrag, false);

   document.documentElement.addEventListener('mouseup', stopDrag, false);

}

function doDrag(e) {

   p.style.width = (startWidth + e.clientX - startX) + 'px';

   p.style.height = (startHeight + e.clientY - startY) + 'px';

}

function stopDrag(e) {

    document.documentElement.removeEventListener('mousemove', doDrag, false);    document.documentElement.removeEventListener('mouseup', stopDrag, false);

}