JSFiddle - React, Tailwind, and code Playground

HTML

<h3 class='editable'>The text you want to edit</h3>

CSS

* {
    box-sizing: border-box;
}

JavaScript

$(document).on('click', '.editable', function() {
    var $wrapper = $('<div class="editing"></div>'),
        $form    = $('<form action="#" class="edit-form"></form>'),
        $input   = $('<input type="text">');

    // Place the original element inside a wrapper:
    $(this).after($wrapper);
    $(this).remove().appendTo($wrapper).hide();

    // Add some styles:
    $input.css({
        display: 'block',
        width: '100%',
        font:  $(this).css('font')
    });

    // Build up the form:
    $wrapper.append($form);
    $form.append($input);
    $input.val($(this).text()).focus();
});

$(document).on('submit', '.edit-form', function(e) {
    // Don't actually submit the form:
    e.preventDefault();

    var val       = $(this).find('input').val(),
        $wrapper  = $(this).parent(),
        $original = $wrapper.children().first();

    // Use text() instead of html() to prevent unwanted effects.
    $original.text(val);
    $original.remove();
    $wrapper.after($original);
    $original.show();
    $wrapper.remove();
});