JSFiddle - React, Tailwind, and code Playground

HTML

<p>Test1:</p>
<div id="test1" contenteditable="true">The cursor will jump here -><br><span id="span1" contenteditable="false">NOT EDITABLE</span> [click here] Move cursor left using left arrow key. If you are in Chrome of Safari you will not be able to move the cursor to the beginning of this line.</div>
  <p>Test 2:</p>
  <div id="test2" contenteditable="true">In this test, I've inserted a zero width space character before the NOT EDITABLE span.<br><span id="span2" contenteditable="false">NOT EDITABLE</span> [click here] You can now move the cursor in front of NOT EDITABLE using the left arrow key, but you </div>

JavaScript

var dom_node = $( '#span2' ).get(0);

var textnode = document.createTextNode( '\u200B' );
dom_node.parentNode.insertBefore( textnode, dom_node );

var range = document.createRange()

range.setStart( textnode, 1 );
range.collapse( true );
var sel = window.getSelection();

sel.removeAllRanges();
sel.addRange( range );