JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/17492730/why-my-javascript-drag-resize-box-doesnt-work-as-expected

HTML

<div></div>

CSS

html,body,div,p {
    padding: 0px;
    margin: 0px;
}
div{
    border: 1px solid black;
    width: 500px;
    height: 500px;
    position:relative;
}

p {
    border: 1px solid red;
    position: absolute;
}

/*html, body {
    width:100%;
    height:100%;
}*/

JavaScript

window.onload = function () {
    var div = document.getElementsByTagName("div")[0];
    var para = null;
    var mouseStartX, mouseStartY; //top & left coordinates of paragraph
    document.body.onmousedown = function (event) {
		if (para) {
			return;
        }
		event = event || window.event; // IE8- http://stackoverflow.com/questions/7790725/javascript-track-mouse-position#7790764
		// https://developer.mozilla.org/en-US/docs/Web/API/window.scrollY#Notes
		var scrollX = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
		var scrollY = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
        mouseStartX = event.clientX + scrollX;
        mouseStartY = event.clientY + scrollY;
        para = document.createElement("p");
        div.appendChild(para);
        para.style.top = mouseStartY + 'px';
        para.style.left = mouseStartX + 'px';
        para.style.width = '0px';
        para.style.height = '0px';
    };
    document.body.onmousemove = function (event) {
        if (!para) {
			return;
		}
		event = event || window.event;
		var scrollX = (window.pageXOffset !== undefined) ? window.pageXOffset : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
		var scrollY = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
        var mouseCurrentX = event.clientX + scrollX;
        var mouseCurrentY = event.clientY + scrollY;
        if (mouseCurrentX >= mouseStartX) {
            para.style.left = mouseStartX + 'px';
            para.style.width = (mouseCurrentX - mouseStartX) + 'px';
        } else {
            para.style.left = mouseCurrentX + 'px';
            para.style.width = (mouseStartX - mouseCurrentX) + 'px';
        }
        if (mouseCurrentY >=...