JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Inline element, width: 100%</h1>
<div contenteditable="true" id="editor1">
    <p>This is editable text <span contenteditable="false" class="ce-false">INLINE NON-EDITABLE TEXT.</span>&larr;Put your cursor here and type.</p>
</div>
<p class="note">Merely setting width:100% on an inline element does not trigger hasLayout, no resize handles or hashed border is added, and content can easily be typed into the element.</p>

<h1>Inline-block element (hasLayout)</h1>
<div contenteditable="true" id="editor2">
    <p>This is editable text <span contenteditable="false" class="ce-false">INLINE-BLOCK NON-EDITABLE TEXT SHOWS A PROBLEM WITH TEXT WRAPPING. I'M WRITING THIS SENTENCE JUST TO ENSURE TEXT WRAPPING.</span>&larr;Put your cursor here and type.</p>
</div>
<p class="note">Setting display:inline-block triggers hasLayout and resize handles and a hashed border are added. However, the layout of the document is wrecked because this text should appear inline with the previous and next text.</p>

CSS

#editor1 .ce-false {
    width: 100%;
}
#editor2 .ce-false {
    display: inline-block;
}
/* General Styling */
body {
    font-family: sans-serif;
    font-size: 12px;
}
h1 {
    color: #666;
    font-size: 1.2em;
    margin: 1.5em 0 0;
}
[contenteditable="true"] {
    border: 1px solid #999;
    padding: .2em .5em;
}
[contenteditable="false"] {
    background: red;
    color: white;   
}
.note {
    font-size: .8em;
    color: #666;
}