JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer" style="background: green; padding: 10px; color: white; width: 100px; white-space: nowrap">
    <div id="inner" style="background: purple; height: 20px; margin-bottom: -20px"></div>
    Some text that is quite long and so forth.
  </div>

CSS

html { background: gray; }
html, body { padding: 0; margin: 0; }

JavaScript

var outer = document.querySelector("div");
var box = outer.getBoundingClientRect();
var elts = document.elementsFromPoint(130, box.y + box.height/2)
for (var elt of elts) {
  console.log(elt.localName, elt.id)
}
document.body.addEventListener("click", function (e) { alert(e.target); })