JSFiddle - React, Tailwind, and code Playground

HTML

<div id="ancestro">
    <div id="barra"><div id="progreso"></div></div>
</div>

CSS

#ancestro { position:absolute; top:100px; left:50px; }
#barra { margin:50px auto; width:500px; height:40px; background-color:#ddd; padding:0px; border:2px solid black; }
#barra:hover { background-color:#bbb; }
#progreso { margin:0px; width:0px; height:100%; background-color:green; }

JavaScript

window.onload=function(){
    var ancestro=document.getElementById("ancestro");;
    var barra=document.getElementById("barra");
    var progreso=document.getElementById("progreso");
    barra.onclick=function(e){
        progreso.style.width=(e.clientX-this.offsetLeft-ancestro.offsetLeft)+"px";
    };
};