Span With Contenteditable Attribute Won't Behave As An Inline Element In Ie11

I am having two span elements inside a div that has limited width. The text content of the two merge seamlessly into one continuous 'paragraph'. However, I need the second span to

Solution 1:

OK. I have a fix for my case:

https://jsfiddle.net/on695rz2/2/

[contenteditable=true]:before {
  content: attr(before-content);
  margin-right: 2px;
}

<divstyle="width:200px"><spanbefore-content="4.5"contenteditable="true">Test this simple layout in IE11 and see the wonders of the internet!</span></div>

This keeps the first part non-editable and the rest editable.

The UX is only good on IE though... so you need to switch implementations accordingly.