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;
}

<div style="width:200px">
  <span before-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.