JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <span id="line1"></span>
</body>

CSS

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}
body {
    background-color: papayawhip;
}
#line1 {
    width: 1px;
    height: 1px;
    background: black;
    position: absolute;
    top: 100px;
    left: 100px;
    -webkit-transform-origin: 0 0 0;
    transform-origin: 0 0 0;
}

JavaScript

var start = null;
$("body").mousedown(function (e) {
    start = {
        left: e.pageX,
        top: e.pageY,
        transform: ""
    };
    $("#line1").css(start);
});
$("body").mousemove(function (e) {
    if (!start) {
        return;
    }
    var width = e.pageX - start.left;
    var height = e.pageY - start.top;
    var length = Math.sqrt(width * width + height * height);
    var angle = Math.atan2(height, width);
    $("#line1").css({
        transform: "rotate(" + angle + "rad) scaleX(" + length + ")",
    });

});
$("body").mouseup(function (e) {
    start = null;
});