JSFiddle - React, Tailwind, and code Playground

HTML

<div tabindex="-1" id="id0"  contenteditable="true" >
    <p class="top-center circle"></p>
    <p class="top-left corner"></p>
    text here
  </div>

CSS

/*STYLING*/

JavaScript

function getCaretPosition(element) {
    let element2 = $(element).get(0);
    let caretOffset = 0;
    
        let range = window.getSelection().getRangeAt(0);
        let preCaretRange = range.cloneRange();
        preCaretRange.selectNodeContents(element2);
        preCaretRange.setEnd(range.endContainer, range.endOffset);
        caretOffset = preCaretRange.toString().length;
    
    return caretOffset;
}

setInterval(function(){
console.log(getCaretPosition(document.getElementById("id0")));
},1000);