Cursor Position between close and open tags

I want to know if it is possible to set caret between closed HTML tag and opened HTML tag.

This is my HTML:

<div contentEditable="true">
  <div> Hello
    <span style="color: red;"> Foo </span>
    <span style="color: blue;"> 
      Bar 
      <span style="color: green;"> 
        From Baz 
      </span> 
    </span>
  </div>
</div>

So, if the cursor is at the end of green tag <span style="color: green;">From Baz</span> (how to get if cursor position at the end of the anchorNode?), by pressing right arrow key, it moves to the parent span which has blue color.

Even with using setStart on range variable at the beginning of the green span,it sets the cursor to the end of the blue span (Bar), then with writing it will be blue (expected was to be on the beginning of the green span).

The question is, is it possible to control cursor position between the tags or not?

Update

1 - I need pure Javascript solution. 2 - It also behaves differently depending on browser. So, it needs a solution that only depends on Javascript, in other word, the question will be, "How it is possible to take control of cursor?"

from Cursor Position between close and open tags