JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a">
  <div class="outer"></div>
  <div class="inner"></div>
</div>
<div id="b">
  <div class="outer"></div>
  <div class="inner"></div>
</div>
<span id="c"></span>
<button id="z">Click Me</button>

CSS

#a,
#b {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-color: #CC3232;
  top: 100px;
}

#b {
  margin: 200px 0 0 250px;
}

div .outer {
  position: absolute;
  background-color: white;
  width: 44px;
  height: 44px;
  border-radius: 44px;
  margin: 3px;
}

div .inner {
  position: absolute;
  background-color: #CC3232;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  margin: 10px;
}

span {
  position: absolute;
  top: 0;
  left: 0;
  height: 10px;
  margin-left: -5px;
  margin-bottom: -5px;
  background-color: #CC3232;
  opacity: .5;
  border-radius: 10px;
  width: 0;
  transform-origin: 0 0;
  transition: width 2s linear;
}

JavaScript

var point1 = document.getElementById('a'),
  point2 = document.getElementById('b'),
  line = document.getElementById('c');

document.addEventListener('click', function() {
  var x1 = point1.offsetLeft,
    y1 = point1.offsetTop,
    x2 = point2.offsetLeft,
    y2 = point2.offsetTop,
    width = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)),
    angle = Math.atan2(y1 - y2, x1 - x2) / Math.PI * 180;
  angle = (angle < 0) ? angle + 360 : angle;
  line.style.cssText = 'transform: rotate(' + angle + 'deg); top: ' + (y2 + 25) + 'px; left: ' + (x2 + 25) + 'px; width: ' + width + 'px';
});