JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="draw"></div>
</body>

CSS

#draw {
width: 300px;
height: 300px;
}

JavaScript

var top = 0;
var left= 0;
var top2 = 0;
var left2 = 0;

$("#draw").css("background", "gray")
    //Check if even or not
    i = 0;
    $("#draw").on("click", function(e) {
       i++;
    //If even, draw line
        if (i%2 != 0) {
        //First point
        top = e.pageY
        left = e.pageX
        }
        else  {
        //Second point
        top2 = e.pageY
        left2 = e.pageX
        //Calculate difference
        heightdifference = top2-top;
        widthdifference = left2-left;
            //arcsin fix: x < -1 or x > 1 not allowed
            //I suck at this, maybe someone can find a better solution?
            divide =  (heightdifference/widthdifference < -1 || heightdifference/widthdifference > 1) ?  widthdifference/heightdifference : heightdifference/widthdifference
            //Rotate the line
        rotation = 180/Math.PI*Math.asin(divide)
            //Pythagoras
        width = Math.sqrt(Math.pow(heightdifference,2)+Math.pow(widthdifference,2))
            //Margin: Pythagoras 2
        a = width/2
        var b
        c = widthdifference/2
        margintop = Math.sqrt(Math.pow(a,2)-Math.pow(c,2))
            margintop = (rotation > 0) ? 0-margintop : margintop            
        $("<div>").css({
           "height": "2px",
           "background": "black",
           "width": width,
           "position": "absolute",
           "top": top,
           "left": left,
            "margin-top": 0-margintop,
            "-webkit-transform": "rotate("+rotation+"deg)",
            "-moz-transform": "rotate("+rotation+"deg)",
            "-ms-transform": "rotate("+rotation+"deg)",
            "-o-transform": "rotate("+rotation+"deg)",
            "transform": "rotate("+rotation+"deg)"
            
        }).appendTo("#draw")
        }           
    })