JSFiddle - React, Tailwind, and code Playground

HTML

<div id="line"></div>

CSS

#line{
		position: absolute;
		width: 0px;
		height: 0px;
		background: rgba(0,90,255,0.25);
		border: 1px solid rgba(0,114,255,0.5);
		box-sizing: border-box;
		
	}

JavaScript

var target = document.getElementById('line');

document.onmousedown = function(e){


	var x = e.pageX;
	var y = e.pageY;
	target.style.left = x + 'px';
	target.style.top  = y + 'px';

	document.onmousemove = function(e){
	

	target.style.width = e.pageX - x +'px';
	target.style.height = e.pageY - y +'px';



	}

return false;

}
	document.onmouseup = function(){
	target.style.width = 0 +'px';
	target.style.height = 0 +'px';
	document.body.style.cursor = 'auto';
	document.onmousemove = function(){}
}