JSFiddle - React, Tailwind, and code Playground

HTML

<table>
<tr class=top><td>https://www.google.com/search?q=flexbox+vs+table&amp;rlz=1C5GCEA_enUS978US978&amp;biw=1440&amp;bih=796&amp;ei=pDpQY8mvAp2mptQPuv-y2Ak&amp;ved=0ahUKEwjJkaaW7-z6AhUdk4kEHbq_DJsQ4dUDCA8&amp;uact=5&amp;oq=flexbox+vs+table&amp;gs_lp=Egdnd3Mtd2l6uAED-AEBGgIYAzIFEAAYgAQyBhAAGBYYHjIGEAAYFhgeMgYQABgWGB4yCRAAGBYYHhiLA8ICBRAAGJECwgIREC4YgAQYsQMYgwEYxwEY0QPCAggQLhixAxiDAcICCBAAGIAEGLEDwgILEC4YsQMYgwEY1ALCAgQQABhDwgIKEAAYsQMYgwEYQ8ICCxAuGI8BGI8BGOoCwgILEAAYjwEYjwEY6gLCAgsQABiABBixAxiDAcICChAuGMcBGNEDGEPCAggQLhiABBixA8ICDRAuGLEDGMcBGNEDGEPCAgsQLhiABBixAxiDAcICDhAuGIAEGLEDGIMBGNQCwgILEAAYsQMYgwEYkQLCAgcQABixAxhDwgIREC4YgAQYsQMYgwEYxwEYrwHCAhMQLhiABBixAxiDARjHARjRAxgKwgIIEAAYhgMYiwPCAgUQABiGA6gCCkixHlAAWLUdcAJ4AcgBAJABAJgBhgGgAcILqgEEMTYuMuIDBCBNGAHiAwQgQRgA4gMEIEYYAIgGAQ&amp;sclient=gws-wiz</td></tr>
<tr class=middle><td>Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle Middle </td></tr>
<tr class=bottom><td>Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom Bottom </td></tr>
</table>

CSS

body, html {
  height: 100%;
  padding: 0;
  margin: 0;
}

table {
  width: 100%;
  height: 100%;
}

.top {
  background: lightgreen;
}

.middle {
  background: yellow;
}

.bottom {
  background: lightblue;
}