JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" onmousedown="moveCaret(); return false" value="Place caret after span">
<div contenteditable="true" id="editor">
    <span id="theSpan">Some text in a span</span> followed by some other text
</div>

CSS

#theSpan {
    color: red;
    font-weight: bold;
}

JavaScript

function placeCaretAfterNode(node) {
    if (typeof window.getSelection != "undefined") {
        var range = document.createRange();
        range.setStartAfter(node);
        range.collapse(true);
        var selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
    }
}

function moveCaret() {
    document.getElementById("editor").focus();
    placeCaretAfterNode( document.getElementById("theSpan") );
}