JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrap">
<div class="a"></div>
<div class="b"></div>
</div>
SCSS
.wrap {
height: 500px;
background: #000;
position: relative;
}
.a, .b {
height: 50px;
width: 25px;
background: red;
position: absolute;
}
.a {
bottom: 100px;
left: 50px;
&:after {
content: '';
right: 50%;
bottom: 100%;
height: 500px;
width: 1px;
background: blue;
position: absolute;
}
}
.b {
bottom: 350px;
left: 330px;
}
JavaScript
let bt = parseInt ($('.b').css('bottom'));
let lf = parseInt($('.b').css('left'));
let a = {l: 50, b: 100 };
let b = {l: lf, b: bt};
t = {
a: a.l - b.l,
b: a.b - b.b,
c: 0
};
t.c = Math.sqrt(t.a*t.a + t.b*t.b);
let cos = Math.acos(t.a / t.c) / Math.PI * 180;
cos = cos-90;
$('.a').css({ transform: 'rotate(' + cos + 'deg)'});