JSFiddle - React, Tailwind, and code Playground

HTML

<span>blablabla</span>

JavaScript

/* http://stackoverflow.com/a/841121/1961666 */
$.fn.selectRange = function(start, end) {
    if(!end) end = start; 
    return this.each(function() {
        if (this.setSelectionRange) {
            this.focus();
            this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};

$('span').on('click', function(evt)
{
    var left = $(this).offset().left;
    var width = $(this).width();
    var clen = $(this).text().length;
    var offset = parseInt((evt.pageX - left)/width * clen);
    console.log(offset);
    $(this).replaceWith($('<input />').val($(this).html()));
    $('input').trigger('focus').selectRange(offset);
});