JSFiddle - React, Tailwind, and code Playground

HTML

<div style="display:inline-block; width:100px;height:500px; background-color:red">
  <span id="span1" style="line-height:500px">
  text
  </span>
</div>
<div id="result">
</div>

JavaScript

var spanEl = document.getElementById("span1");
var textNode = spanEl.childNodes[0]; 
var offsetStart = 0;
var offsetEnd = textNode.nodeValue.length;
        
var range = document.createRange();
range.setStart(textNode, offsetStart);
range.setEnd(textNode, offsetEnd);
    
var rect = range.getBoundingClientRect();
document.getElementById('result').innerHTML = "Range rect top = "+rect.top;