Каретка идет рядом с текстом, а не с промежутком на contenteditable div

Question

При использовании атрибута contenteditable в элементе div и вставке в него элемента HTML, по какой-то причине курсор вставляется в пространство рядом с текстом:

Для репликации нажмите клавишу Backspace, чтобы удалить знак вопроса в конце примера, который я предоставил

.pill {
    background-color:  #EEEEEE;
    border: none;
    color: black;
    padding: 0px 4px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    font-size:0.8em;
    z-index:100;
}

<div style="resize:none; overflow: auto; border: none" contenteditable="true">
    is your email still <span class="pill" contenteditable="false">Email</span>?
</div>