JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>    
<table border="1">
  <tr>
    <td rowspan="2" id="cell_1">Cell 1</td>
    <td id="cell_2">Cell 2</td>
  </tr>
  <tr>
    <td id="cell_3">Cell 3</td>
  </tr>
  <tr>
    <td rowspan="3" id="cell_4" >Cell 4</td>
    <td id="cell_5">Cell 5</td>
  </tr>
  <tr>
    <td id="cell_6">Cell 6</td>
  </tr>
  <tr>
    <td>Cell 7</td>
  </tr> 
</table>
</body>
</html>

CSS

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

JavaScript

$(document).ready(function(){
    $("#cell_1").height((($("table").height()*40)/100)+"px");
    $("#cell_2").height((($("#cell_1").height()*30)/100)+"px");
    $("#cell_5").height((($("#cell_4").height()*20)/100)+"px");
    $("#cell_6").height((($("#cell_4").height()*40)/100)+"px");
    $("#cell_7").height((($("#cell_4").height()*40)/100)+"px");
});