JSFiddle - React, Tailwind, and code Playground

HTML

<div class="div">
  <div class="dot1">
  <div class="line"></div>
  </div>
  <div class="dot2"></div>  
</div>

CSS

.dot1, .dot2 {
  width: 15px;
  height: 15px;
  background: tomato;
  position: absolute;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  cursor: pointer;
}

.dot1 {
  top: 30px;
  left: 40px;
}
.dot2 {
  top: 130px;
  left: 220px;
}

.line {
  width: 0;
  border-bottom: 0;
  border-top: 1px solid darkcyan;
  top: 7px;
  left: 7px;
  position: absolute;
  transform-origin: 0% 0%;
}

.div {
  width: 300px;
  height: 300px;
  border: 1px solid grey;
}

JavaScript

var dot1 = document.getElementsByClassName('dot1')[0];
var dot2 = document.getElementsByClassName('dot2')[0];

// 
var choords1 = dot1.getBoundingClientRect();
var choords2 = dot2.getBoundingClientRect();

// get choords
var x1 = choords1.left;
var y1 = choords1.top;
var x2 = choords2.left;
var y2 = choords2.top;

// line width 
var line = document.getElementsByClassName('line')[0];
var lineWidth = getChoordsWidth(x1, y1, x2, y2);
line.style.width = lineWidth + 'px';


function getChoordsWidth(x1, y1, x2, y2) {
  // √(x2 - x1)2 + (y2 - y1)2
  var a1 = Math.pow((x2 - x1), 2);
  var a2 = Math.pow((y2 - y1), 2);
  var tg = ((y2 - y1)/(x2 - x1));
  var aRad = Math.atan(tg);
  var aDeg = aRad/Math.PI*180;
  console.log('a = '+aRad+'rad');
  console.log('a = '+aDeg+'deg');
  
  
  var res = a1 + a2;

  return (Math.sqrt(res));
}