JSFiddle - React, Tailwind, and code Playground

HTML

<div id="experiment" style="border: 5px inset #AAA; background: #CCC; height: 400px; position: relative; overflow: auto;">
    <div style="width: 900px; height: 2px;"></div> 
    <div style="height: 900px; width: 2px;"></div>
</div>

CSS

#experiment {
    transform: scale(1.5);
}

JavaScript

function click_handler(ev) {
    var rect = this.getBoundingClientRect();
    var left = (ev.clientX - rect.left - this.clientLeft + this.scrollLeft) / 0.5;
    var top = (ev.clientY - rect.top - this.clientTop + this.scrollTop) / 0.5;

    var dot = document.createElement('div');
    dot.setAttribute('style', 'position:absolute; width: 2px; height: 2px; top: '+top+'px; left: '+left+'px; background: red;');
    this.appendChild(dot);
}
    
document.getElementById("experiment").addEventListener('click', click_handler, false);