JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <p>editable</p>
    <input type="text" id="textEdit" style="display:none" />
</div>

CSS

body,html {
    height: 100%;
}

JavaScript

$(function() {

    $("#textEdit").click(function(event) {
        event.stopPropagation();
    });

    $('body').click(function(event) {
        $("#textEdit").hide();
        $('p').show();
    });
    
    $('p').click(function(event) {
        event.stopPropagation();
        $('p').hide();
        $('#textEdit').show();
    });

});