title: Resize Table Header height according to other Table Header height in different div
body: <p>I've created a specification area on my webpage just like I've shown in this <strong><a href="https://jsfiddle.net/the_hardik_sisodia/jz1fakx8/" rel="nofollow"><code>JSFIDDLE</code></a></strong>. I am not able to understand how can we make left div and right div table header <strong>height</strong> equal to each other, because each section in left div's table header height may differ as per the characters inserted in the right div table header. The code is given below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#maindiv {
      float:left;
      width:100%;
      height:565px;
      color:Black;
  }
  #leftdiv {
      border:1px solid black;
      margin-top:0px;
      margin-left:5px;
      float:left;
      height:100%;
      width:30%;
      -webkit-box-flex:1;
  }
  #leftdiv table {
      padding:5px;
      font-size:22px;
  }
  #rightdiv {
      border:1px solid black;
      margin-top:0px;
      float:left;
      height:100%;
      width:67%;
      -webkit-box-flex:1;
  }
  #rightdiv table {
      padding:5px;
      font-size:22px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="maindiv"&gt;
      &lt;div id="leftdiv"&gt;
          &lt;table align="center" border="1"&gt;
              &lt;tr&gt;
                  &lt;th&gt;Product Name&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Size Available&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Color Available&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Product Description&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Availability&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;div id="rightdiv"&gt;
           &lt;table align="left" border="1"&gt;
              &lt;tr&gt;
                  &lt;th&gt;Cell Phone&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;5.5,6.5&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;White, Red, Black, Silver, Gold&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;QWERTY Soft Keyboard (Google Keyboard and Swiftkey Pre-loaded), USB OTG Support, 24 Languages Support, Wi-Fi Direct, WLAN Support, Games, Vibrant&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;This product is not out of stock.&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>