JSFiddle - React, Tailwind, and code Playground

HTML

<form action="height_test_quirks_form_target">
<table>
 <tr><td colspan=2 class=header>Hello, I'm the headline! I'm the first row of a fullscreen table.</td></tr>
 <tr>
  <td>
   <textarea>Hello, I'm a blue textarea inside the red table.
My width and height are set to 100% so I fill the whole cell that I'm in.

You can edit this text.</textarea>
  </td>
  <td>
   Hello, I'm the right side of the Page. I'm a cell of the fullscreen table.<br>
   <br>
   So everything is fine and the sky is blue. But only in quirks mode. As soon as you add a &lt;!doctype html&gt; to this page, everything goes haywire. Is there a way to accomplish this layout in standards mode?<br>
<br>
  </td>
 </tr>
 <tr><td colspan=2 class=header>Hello, I'm the footer! I'm the last row of a fullscreen table. If this would be a more then a test page, this button would send the content of the textarea somewhere: <input type=submit></td></tr>
</table>
</form>

CSS

html     { height: 100%; margin: 0; padding: 0;}
  body     { height: 100%; margin: 0; padding: 0;}
  textarea { height: 100%; margin: 0; padding: 0; border: 2px solid blue; width: 100%}
  table    { height: 100%; margin: 0; padding: 0; width: 100%; border-collapse: collapse}
  td       { border: 2px solid red; width: 50%; vertical-align: top; }
  .header   { height: 1em; border-bottom: 2px solid red; }