JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable="true">
    I am div number one
    <div contenteditable="false">I am not editable</div>
    However I am editable
</div>
<div contenteditable="true">
    I am div number two
    <div contenteditable="false">I am not editable</div>
    However I am editable
</div>
<div class="workaround" contenteditable="true">
    I am div number three
    <div contenteditable="false">I am not editable, and I have user-select: none;</div>
    However I am editable
</div>

CSS

div {
    border: 1px solid red;
    margin: 5px;
    padding: 2px;
}

.workaround div[contenteditable=false] {
    -moz-user-select: none;
    -webkit-user-select: none;
}