I am pulling my hair out due to this VERY weird behaviour I am seeing. I hope it's not something obvious I have overlooked or I will shoot myself in the knee.
Check out this fiddle. https://jsfiddle.net/Eristen/eqckdzjx/3/
What you won't notice right away is that the browser engine for some reason deletes this form element.
<form class="form-row" id="what-the-hell">
...
</form>
It doesn't remove it along with its contents, it just removes the element tags without touching the contents, thus ending up with the vertically aligned form groups instead of horizontally aligned as it should.
Now what is even weirder is that when I add this entire element dynamically with jQuery it actually leaves it as it is, without removing it and the inside elements align horizontally as they should (since it's a row layout element, that's its purpose).
So what am I missing here?
edit: It appears nesting forms is not allowed, although my code works when dynamically nesting them.
