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;
}

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;
    height: 10px;
    background-color: #CC3232;
    opacity: .5;
    border-radius: 10px;
}

JavaScript

var a = document.getElementById('a');
var b = document.getElementById('b');
var c = document.getElementById('c');

var initialPosition = 100;
var distance = 100;
a.style.left = initialPosition + 'px';
b.style.left = initialPosition + distance - 10 + 'px';
c.style.top = c.style.left = '120px';

var drawLine = function() {
  var width = +c.style.width.replace('px','');
    
  if (width < distance) {   
    c.style.width = width + 2 + 'px';
  } else {
    clearInterval();
  }
};

document.getElementById('z').onclick = function() {
  c.style.width = '10px';
  setInterval(drawLine, 10);
}