JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="someid" value="Place cursor here"></textarea>
    <span id="faux" style="background:red;"></span>
    <br/>
    <span id="getpx"></span>

JavaScript

var inputter = $('#someid')[0];
var faux = $('#faux');

function getCaret(el) { 
    if (el.selectionStart) { 
        return el.selectionStart; 
    } else if (document.selection) { 
        el.focus(); 
        
        var r = document.selection.createRange(); 
        if (r == null) { 
            return 0; 
        } 
        
        var re = el.createTextRange(), 
            rc = re.duplicate(); 
        re.moveToBookmark(r.getBookmark()); 
        rc.setEndPoint('EndToStart', re); 
        
        return rc.text.length; 
    }  
    return 0; 
}

$("#someid").click( function( event ) {
    caretpos = getCaret(inputter);
    calcfaux = faux.text($(this).val().substring(0, caretpos));
    fauxpos = calcfaux.outerWidth();
    $("#getpx").text(fauxpos + " px");
});