After adding span tag in contenteditable cursor move to end in IOS safari

I have a feature where users can click on the tag and the same has been added to contenteditable div. this works fine but when I do it back and forth the cursor moves the end of the div.

This is when user adds variable first time and cursor seems fine.

This is when user remove and add tag again

The tag has been added by the following code and this issue is happing in ios safari only.

insertTextAtCursor = (text, paste = false) => {
    const sel = window.getSelection();
    // Make sure we're focused on the compose element
    this.compose.focus(); // contenteditable div ref

    if (sel.getRangeAt && sel.rangeCount) {
      const range = sel.getRangeAt(0);
      range.deleteContents();
      if (paste) {
        range.insertNode(document.createTextNode(text));
        range.selectNode(document.createTextNode(text));
      } else {
        range.insertNode(text);
        range.selectNode(text);
      }
      // calling deleteContents and replacing with HTML leaves behind an empty node, so here we clean discard it.
      const newRange = range.cloneRange();
      range.setEndBefore(text);
      newRange.setStartAfter(text);
      newRange.setEndAfter(text);
      sel.removeAllRanges();
      sel.addRange(newRange);
    }
  }

Edit The cursor becomes too big after adding display: inline-block property.

HTML

<div id="variable-message-input-message-fb39fc57-7909-47e2-9de8-042e70eee3ad" class="variable-message__compose" contenteditable="true" name="message" placeholder="" style="
/* display: inline-block; */"><span spellcheck="false" contenteditable="false" id="span-First Name" class="variable-message__variable"><i>{</i><div>First</div><b>_</b><div>Name</div><i>}</i><span class="variable-message__close"></span></span></div>

CSS

background-color: #fcfcfc;
border: 1px solid #e3e3e3;
border-top-left-radius: .2rem;
border-top-right-radius: .2rem;
color: #404040;
min-height: 4rem;
padding: 1rem 1.2rem;