title: How to make two columns same height - Zurb INK
body: <p>I have two columns, one have more content = is bigger, but I want that black one to be same height like that on the right.</p>
  
  <p><img src="https://i.stack.imgur.com/p4s3U.jpg" alt="enter image description here"></p>
  
  <p>There is workaround that you add div around table width height 100% and display: inline-block, but it is an ugly hack.</p>
  
  <p>Anyone know solution?</p>
  
  <pre><code>&lt;table class="body"&gt;
          &lt;tr&gt;
              &lt;td class="center" align="center" valign="top"&gt;
          &lt;center&gt;
  
              &lt;table class="container"&gt;
                &lt;tr&gt;
                  &lt;td&gt;
  
                  &lt;table class="row"&gt;
                    &lt;tr&gt;
                      &lt;td class="wrapper"&gt;
  
                        &lt;table class="six columns" style="background-color: black; color: white;"&gt;
                          &lt;tr&gt;
                            &lt;td align="center" style="vertical-align: middle;"&gt;
                              &lt;center style="vertical-align: middle; color:white;"&gt;
                                TEXT
                              &lt;/center&gt;
                            &lt;/td&gt;
                            &lt;td class="expander"&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                        &lt;/table&gt;
  
                      &lt;/td&gt;
  
                      &lt;td class="wrapper last"&gt;
  
                        &lt;table class="six columns" style="background-color: lightgray; color: white;"&gt;
                          &lt;tr&gt;
                            &lt;td align="center"&gt;
                              &lt;center&gt;
                                  TEXT&lt;/br /&gt;
                                  TEXT&lt;/br /&gt;
                                  TEXT&lt;/br /&gt;
                                  TEXT&lt;/br /&gt;
                                  TEXT&lt;/br /&gt;
                                  TEXT&lt;/br /&gt;
                                  TEXT&lt;/br /&gt;
                                  TEXT&lt;/br /&gt;
                                  TEXT&lt;/br /&gt;
                                  TEXT&lt;/br /&gt;
                                  TEXT&lt;/br /&gt;
                                  TEXT&lt;/br /&gt;
                                  TEXT&lt;/br /&gt;
                                  TEXT&lt;/br /&gt;
                                  TEXT&lt;/br /&gt;
                              &lt;/center&gt;
                            &lt;/td&gt;
                            &lt;td class="expander"&gt;&lt;/td&gt;
                          &lt;/tr&gt;
                        &lt;/table&gt;
  
                      &lt;/td&gt;
  
                    &lt;/tr&gt;
                  &lt;/table&gt;
  
                &lt;!-- container end below --&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/table&gt;
  
          &lt;/center&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>