JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div class="circle_div"></div>
    <div class="circle_div"></div>
    <div class="circle_div"></div>
</div>

CSS

.circle_div {
    display:block;
    transition: height 0.5s ease;
    position: relative;
    border-radius: 55px;
    border: 1px solid black;
    width: 100px;
    height: 5px;
    background-color: black;
    margin-bottom: 10px;
}

JavaScript

// Wait 2 seconds and then resize the circles
setTimeout(function () {
    var circle_div = [].slice.call(document.getElementsByClassName('circle_div'), 0);

    circle_div.forEach(function (el) {
        el.style.height = el.clientWidth + "px";
    });
    
}, 2000);