Why Are Inline Div Behaving This Way Inside P

In the linked example, I have a text and a paragraph which each contain span and div elements. Although all the div elements have the display: inline; style applied, the first div

Solution 1:

div inside p is invalid markup. When the browser encounters the div element it auto-closes the p tag and starts the new div.