JSFiddle - React, Tailwind, and code Playground

HTML

<form id="aa1" style="border: solid 2px blue; padding: 4px;">
    <p>Try out, then change the container of this element from FORM to DIV and see the difference</p>
</form>

<button type="button" onclick="document.getElementById('aa1').innerHTML = '<form id=\'aa2\' style=\'border: solid 8px red; padding: 4px;\'><p>' + (new Date().toString()) + '</p></form>';">Click me</button>

<p>
When you click the button, the border stays blue and data/time is shown. This means the nested tag is ignored but it's content is copied.
</p>

<p>
Now change the &lt;form&gt; tag on line 1 to 3 into a &lt;div&gt; tag. Run again and click the button. There now appears a nested border.
</form>
</p>

<p>
This demonstrates the browser 'eats' the inner FORM element when the innerHTML property is set.
</p>

<p>
Which browsers do that and since when (which version or date) ?
</p>