JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sizes"></div>
<table id="wr" cellspacing="0" cellpadding="0">
    <tr>
      <td>
          <div id="con_top"></div>
      </td>                      
    </tr>
    <tr>
      <td id="sub_wr">
          <div id="con_bottom"></div>          
      </td>                      
    </tr>
</table>

CSS

#wr {
    height:400px;
    width:400px;
    margin:50px auto;
    border:1px solid black;
}
    #con_top {
        height:40px;
        margin:5px;
        border:1px solid red;            
    }
    #sub_wr {
        height:100%;
    }
        #con_bottom {
            height:100%;
            border:1px solid blue;
            margin:5px;    
        }

JavaScript

alert('#wr height:'+ $('#wr').height()+'px, but should be 400px');