JSFiddle - React, Tailwind, and code Playground

HTML

<div class="draggable resizable">
    <div id="field2" contentEditable='true'>Company message</div>
</div>

CSS

div.resizable {
    width: 300px;
    height: 200px;
    background: lightgreen;
    padding: 0px;
}
#field2 {
    background: cyan;
}

JavaScript

$(".resizable").resizable();
$(".draggable").draggable({
    drag: function (event, ui) {
        ui.helper.children('#field2').blur()
    }
});

$('#field2').dblclick(function (e) {
    e.stopPropagation()

    $(this).focus();
})

$('.draggable').click(function (e) {
    $(this).children('#field2').blur()
});