Content editable - Set range on an empty bold tag

I have this simple code that is trying to set the caret position on an empty bold tag. But it places the caret position on the italics only.

Once the focus is set, any new text should be in bold. But it is in italics.

Source - https://jsfiddle.net/vx31fpar/1/

<!DOCTYPE html>
<body>
  <p id="p" contenteditable="true"><i>italic</i><b></b></p>

  <button id="button">Click to focus</button>
  <script>
    button.onclick = () => {
      let range = new Range();

      range.setStart(p.childNodes[1], 0);
      range.setEnd(p.childNodes[1], 0);

      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);
    };
  </script>
</body>

If there is some text on the bold tag (https://jsfiddle.net/vx31fpar/2/), it still places the caret before the bold tag.