JSFiddle - React, Tailwind, and code Playground

HTML

<div id="testing" contenteditable="true"><span contenteditable="false" class="lead">Something something</span>&#8203;</div>

<input type="button" id="addBtn" value="Add Back" />

CSS

#testing {
    padding: 5px;
	width: 90%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 13px;
	color: #3B3B3B;
	margin: 0px 0px 15px 0px;
	resize: none;
	overflow: hidden;
	background-color: #FAFAFA;
	line-height: 15px;
	min-height: 42px;
	max-height: 160px;
	outline: none;
}
.lead {
    color: #000;
    background: #ccd;
    padding: 1px 2px 1px 2px;
    font-size: 12px;
    margin-right: 4px;
    border: none;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;    
}

JavaScript

var somethingVisible = true;
var somethingsomething = '<span contenteditable="false" class="lead">Something something</span>&#8203;';
var spanContLen = $('.lead').html().length + 1;

$('#testing').on('keydown', function(e){
	if(somethingVisible){
    	var pos = getCaretPosition(this);
        if(pos < spanContLen){
            setPos(this);
        }

        if(pos <= spanContLen && e.keyCode == 8){
            $('.lead').remove();
            somethingVisible = false;
        }
    }
}).on('keyup', function(e){
	if(somethingVisible){
    	var pos = getCaretPosition(this);
        if(pos < spanContLen){
            setPos(this);
        }
    }
}).on('click', function(e){
	if(somethingVisible){
    	var pos = getCaretPosition(this);
        if(pos < spanContLen){
            setPos(this);
        }
    }
});

$('#addBtn').on('click', function(e){
	e.preventDefault();
    
    if(!somethingVisible){
    	$('#testing').prepend(somethingsomething);
        somethingVisible = true;
    }
});

function setPos(el){
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(el.childNodes[1], 1);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
}

var ie = (typeof document.selection != "undefined" && document.selection.type != "Control") && true;
var w3 = (typeof window.getSelection != "undefined") && true;

function getCaretPosition(element) {
    var caretOffset = 0;
    if (w3) {
        var range = window.getSelection().getRangeAt(0);
        var preCaretRange = range.cloneRange();
        preCaretRange.selectNodeContents(element);
        preCaretRange.setEnd(range.endContainer, range.endOffset);
        caretOffset = preCaretRange.toString().length;
    } else if (ie) {
        var textRange = document.selection.createRange();
        var preCaretTextRange = document.body.createTextRange();
        preCaretTextRange.moveToElementText(element);
        preCaretTextRange.setEndPoint("EndToEnd",...