JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tX" contenteditable="true">Position Text Caret</div>
<div id="answer"></div>

CSS

#tX {
    font-family: Serif;
    border: 3px solid rgb(154, 154, 210);
    padding: 5px;
    background-color: gray;
    color: white;
}

#answer {
    font-family: Serif;
    padding-top: 5px;   
}
}

JavaScript

$('#tX').on('click', function(ev){
     $('#answer').text(window.getSelection().anchorOffset);
});

$('#tX').on('blur', function(ev){
    $('#answer').text('');
});

$('#tX').on('keydown', function(ev){
    if(ev.keyCode >= 37 && ev.keyCode <= 40){
        setTimeout(function() { $('#answer').text(window.getSelection().anchorOffset); }, 50);
    }
});