JSFiddle - React, Tailwind, and code Playground

by Anirudh Tewathia

HTML

<div id="parentDiv">
    <div id="childDiv"></div>
</div>

CSS

#parentDiv {
    border:1px solid black;
    height:20px;
    background-color:Gainsboro;
    width:500px;
    margin:30px;
}
#childDiv {
    float:left;
    height:20px;
    width:10px;
    background-color: navy;
    margin-left: 10px;
}

JavaScript

var parentDiv = document.getElementById('parentDiv');

parentDiv.addEventListener('click', function (e) {
    var offset = this.getClientRects()[0];
    alert(e.clientX - offset.left);
}, false);