JSFiddle - React, Tailwind, and code Playground

HTML

<pre class="map">abcdefg
hijklmnop
qrstuv</pre>
<pre class="measure">m</pre>

CSS

pre {
    float: left;
    font-family: monospace;
    font-size: 24px;
}

pre.measure {
    display: none;
}

JavaScript

$(function() {
    var width = $("pre.measure").outerWidth();
    var height = $("pre.measure").outerHeight();
    console.log(width, height);
    $("pre.map").on("click", function (event) {
       console.log(Math.floor(event.clientX/width), Math.floor(event.clientY/height));
    });
});