JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Non-editable content within editable content</h3>
    <div contenteditable="true">
      before inner
      <span contenteditable="false" tabindex="-1" class="a">
        inside non-editable
      </span>
      after inner
    </div>
    <h3>Editable content within non-editable content within editable content</h3>
    <div contenteditable="true">
      before inner
      <span contenteditable="false" tabindex="-1" class="a">
        <span contenteditable="true" class="b">
          inside editable
        </span>
      </span>
      after inner
    </div>

    <h3>Same with non-editable padding</h3>
    <div contenteditable="true">
      before inner
      <span contenteditable="false" tabindex="-1" class="a p">
        <span contenteditable="true" class="b">
          inside editable
        </span>
      </span>
      after inner
    </div>
    <h3>Same with inner editable margin</h3>
    <div contenteditable="true">
      before inner
      <span contenteditable="false" tabindex="-1" class="a">
        <span contenteditable="true" class="b m">
          inside editable
        </span>
      </span>
      after inner
    </div>
    <h3>Same with non-editable text</h3>
    <div contenteditable="true">
      before inner
      <span contenteditable="false" tabindex="-1" class="a">
        [[[
        <span contenteditable="true" class="b">
          inside editable
        </span>
        ]]]
      </span>
      after inner
    </div>

CSS

[contenteditable=false] { outline: 1px dashed red; }
      [contenteditable=true] { outline: 1px dotted green; }
      .a { display: inline-block; background: #fee; }
      .b { display: inline-block; }
      .p { padding: 0 20px; }
      .m { margin: 0 20px; }