JSFiddle - React, Tailwind, and code Playground

HTML

<div contenteditable="true" id="EDITABLE"><div class="content" id="div1">Content for div1</div><div class="content" id="div2">content for div 2</div>

CSS

div.content 
{
display: inline-block;
font-weight: bold;
}

JavaScript

$( '#EDITABLE' ).focus();

var selection = window.getSelection();

var range = document.createRange();

var div = $('#div2').get(0);

range.setStartBefore(div);
range.collapse(true);

selection.removeAllRanges();
selection.addRange(range);

// cursor should now be between div1 and div2

range = window.getSelection().getRangeAt(0);

console.log("range object returned is: ", range);

// type something into the content editable div. why is it coming
// up bold since the cursor should be between the divs? it's 
// positioning the cursor at the end of the previous div. I want to
// target the spot between the divs. how?