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() {
    
    $('body').click(function(event) {
        var parents = $(event.target).parents().andSelf();
        if (parents.filter(function(i,elem) { return $(elem).is('#textEdit'); }).length == 0) {
            $('p').show();
            $('#textEdit').hide();
        }
    });
    
    $('p').click(function(event) {
        event.stopPropagation();
        $('p').hide();
        $('#textEdit').show();
    });
});