JSFiddle - React, Tailwind, and code Playground

HTML

<br><br>

<div class ="container" contenteditable="true">
    &zwnj;<span class="meatball" id="meatball" contenteditable="true"><span>&zwnj;</span>meatball<span></span></span>&zwnj;
</div>
<!-- will work with contenteditable="false" but then I can't type blue-->

CSS

#meatball{
    border: 1px dashed blue;
    color:blue;
    padding: 0 30px 0 30px;
    font-size:20px;
}

.container{
    border: 1px dashed red;
    color:red;

}