JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div id="editable">Double Click On Me!</div>
</div>

CSS

.wrapper {
    padding: 1em;
}

#editable {
    width: 300px;
    height: 250px;
    border: 1px solid red;
}

#editBox {
    width: 98%;
    height: 98%;
    border: 0px;
}

JavaScript

$('#editable').dblclick(function () {
    var $text = $(this).html();
    var $edBox = '<textarea id="editBox">' + $text + '</textarea>';
    $(this).html($edBox);
});

$('#editable').on("keypress", function (event) {
    if (event.which == 13) {
        var $text = $("#editBox").val();
        $(this).html($text);
    }
});