Hey all,

I have been trying to get an even height pair of columns working. I am almost there but am stuck on the last bit, which is proving very difficult. The left and right column cells are both gowing to 100% of their container, the cells content is vertically aligned to the top, but I need the CTA bottom to vertically align to the bottom, so if either column grows larger than the other, the CTAS will always align up at the bottom of the cell.

I can only think of two ways of doing this. The first is just to find a way to force the CTA to align bottom even though the other items are aligned to the top, or place another cell around it that then grows to the remaining height of the container, allowing the CTA to align to its bottom.

I have been playing with both ideas but have had no success at all. Does anybody have any ideas?

`   <body style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0; font-family: Arial, sans-serif; font-size: 15px; line-height: 18px; color: #000000; width: 100%;" class="md-r">
            <table cellpadding="0" cellspacing="0" border="0" width="600" style="margin: 0; padding: 0; text-align: left; width: 100%; min-width: 600px; line-height: 100%;" role="presentation" class="background-table has-width-600" bgcolor="#EEEEEE" valign="top">
              <tbody>
                <tr>
                  <th valign="top" style="padding: 0;">
                    <table cellpadding="0" cellspacing="0" border="0" width="600" style="width:600px;margin:0 auto" role="presentation" class="email-content" align="center">
                      <tbody>
                        <tr>
                          <th valign="top" style="padding: 0;">
                            <div>
                              <table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
                                <tbody>
                                  <tr>
                                    <th valign="top" style="padding: 0; text-align: left;" class="block-horz-container horizontal-grid" bgcolor="#FFFFFF" align="left">
                                      <table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
                                        <tbody>
                                          <tr>
                                            <th valign="top" style="padding: 0; text-align: left; font-size: 1px; line-height: 1px;" class="vertical-gutter" width="10" align="left">&nbsp;</th>
                                            <th valign="top" style="padding: 0; border: 1px solid #000000; text-align: left;" class="border left-block vertical-grid" width="280" align="left">
                                              <table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
                                                <tbody>
                                                  <tr>
                                                    <th valign="top" style="padding: 0; text-align: left;" class="vertical-grid" width="280" align="left">
                                                      <table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
                                                        <tbody>
                                                          <tr>
                                                            <th valign="top" style="padding: 0; text-align: left;" class="image-container" width="280" align="left"><img src="https://placehold.it/280x150" width="280" height="150" alt="" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; display: block;"></th>
                                                          </tr>
                                                          <tr>
                                                            <th valign="top" style="mso-line-height-rule: exactly; padding: 0; text-align: center; font-family: Arial, sans-serif; font-size: 15px; line-height: 18px; font-weight: normal; color: #000000; padding-top: 15px; padding-bottom: 5px;" class="pad-top-15 pad-bottom-5 text-container" width="280" align="center">LEFT BLOCK</th>
                                                          </tr>
                                                          <tr>
                                                            <th valign="top" style="mso-line-height-rule: exactly; padding: 0; padding-left: 10px; padding-right: 10px; text-align: center; font-family: Arial, sans-serif; font-size: 15px; line-height: 18px; font-weight: normal; color: #000000; padding-top: 10px; padding-bottom: 10px;" class="fs-12 pad-top-10 pad-bottom-10 pad-sides-10 text-container" width="280" align="center">Eiusmod proident tempor esse elit ea nulla quis ex laboris officia sit dolor culpa. Quis aute ipsum eiusmod occaecat commodo. Ad est qui nostrud consectetur quis cillum ut aute voluptate amet eu deserunt.<br>sdasdsdsd<br>sdsds</th>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </th>
                                                  </tr>
                                                  <tr>
                                                    <th valign="text-bottom" style="padding: 0; width: 280px; display: table-cell; bottom: 0; text-align: left; height: 100%; vertical-align: text-bottom;" class="play vertical-grid" width="280" align="left">
                                                      <table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
                                                        <tbody>
                                                          <tr>
                                                            <th valign="bottom" style="padding: 0; height: 100%; text-align: left; padding-top: 10px; padding-bottom: 20px;" class="pad-top-10 pad-bottom-20 full-height mobile-display-block button-container" width="280" align="left">
                                                              <table cellpadding="0" cellspacing="0" border="0" width="100%" role="presentation">
                                                                <tbody>
                                                                  <tr>
                                                                    <th valign="top" style="padding: 0;">
                                                                      <table cellpadding="0" cellspacing="0" border="0" width="auto" style="margin:0 auto" role="presentation" align="center">
                                                                        <tbody>
                                                                          <tr>
                                                                            <th valign="middle" style="mso-line-height-rule: exactly; padding: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #444444; text-align: center;" align="center"><a style="-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:10px 20px;display:inline-block;text-decoration:none;text-align:center;color:#FFFFFF;border:1px solid #444444;font-family:Arial, sans-serif;font-size:15px;line-height:18px;font-weight:normal" href="#" target="_blank">Click here</a></th>
                                                                          </tr>
                                                                        </tbody>
                                                                      </table>
                                                                    </th>
                                                                  </tr>
                                                                </tbody>
                                                              </table>
                                                            </th>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </th>
                                                  </tr>
                                                </tbody>
                                              </table>
                                            </th>
                                            <th valign="top" style="padding: 0; text-align: left; font-size: 1px; line-height: 1px;" class="vertical-gutter" width="20" align="left">&nbsp;</th>
                                            <th valign="top" style="padding: 0; border: 1px solid #000000; text-align: left;" class="border right-block vertical-grid" width="280" align="left">
                                              <table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
                                                <tbody>
                                                  <tr>
                                                    <th valign="top" style="padding: 0; text-align: left;" class="vertical-grid" width="280" align="left">
                                                      <table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
                                                        <tbody>
                                                          <tr>
                                                            <th valign="top" style="padding: 0; text-align: left;" class="image-container" width="280" align="left"><img src="https://placehold.it/280x150" width="280" height="150" alt="" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; display: block;"></th>
                                                          </tr>
                                                          <tr>
                                                            <th valign="top" style="mso-line-height-rule: exactly; padding: 0; text-align: center; font-family: Arial, sans-serif; font-size: 15px; line-height: 18px; font-weight: normal; color: #000000; padding-top: 15px; padding-bottom: 5px;" class="pad-top-15 pad-bottom-5 text-container" width="280" align="center">RIGHT BLOCK</th>
                                                          </tr>
                                                          <tr>
                                                            <th valign="top" style="mso-line-height-rule: exactly; padding: 0; padding-left: 10px; padding-right: 10px; text-align: center; font-family: Arial, sans-serif; font-size: 15px; line-height: 18px; font-weight: normal; color: #000000; padding-top: 10px; padding-bottom: 10px;" class="fs-12 pad-top-10 pad-bottom-10 pad-sides-10 text-container" width="280" align="center">Eiusmod proident tempor esse elit ea nulla quis ex laboris officia sit dolor culpa. Quis aute ipsum eiusmod occaecat commodo. Ad est qui nostrud consectetur quis cillum ut aute voluptate amet eu deserunt.</th>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </th>
                                                  </tr>

                                                  <!-- CTA -->
                                                  <tr>
                                                    <th valign="top" style="padding: 0; text-align: left;" class="vertical-grid" width="280" align="left">
                                                      <table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
                                                        <tbody>
                                                          <tr>
                                                            <th valign="text-bottom" style="padding: 0; width: 280px; display: table-cell; bottom: 0; text-align: left; height: 100%; vertical-align: text-bottom; padding-top: 10px; padding-bottom: 20px;" class="pad-top-10 pad-bottom-20 play mobile-display-block button-container" width="280" align="left">
                                                              <table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%" role="presentation">
                                                                <tbody>
                                                                  <tr>
                                                                    <th valign="top" style="padding: 0;">
                                                                      <table cellpadding="0" cellspacing="0" border="0" width="auto" style="margin:0 auto" role="presentation" align="center">
                                                                        <tbody>
                                                                          <tr>
                                                                            <th valign="middle" style="mso-line-height-rule: exactly; padding: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #444444; text-align: center;" align="center"><a style="-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:10px 20px;display:inline-block;text-decoration:none;text-align:center;color:#FFFFFF;border:1px solid #444444;font-family:Arial, sans-serif;font-size:15px;line-height:18px;font-weight:normal" href="#" target="_blank">Click here</a></th>
                                                                          </tr>
                                                                        </tbody>
                                                                      </table>
                                                                    </th>
                                                                  </tr>
                                                                </tbody>
                                                              </table>
                                                            </th>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </th>
                                                  </tr>
                                                </tbody>
                                              </table>
                                            </th>
                                            <th valign="top" style="padding: 0; text-align: left; font-size: 1px; line-height: 1px;" class="vertical-gutter" width="10" align="left">&nbsp;</th>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </th>
                                  </tr>
                                </tbody>
                              </table>
                            </div>
                            <div>
                              <table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
                                <tbody>
                                  <tr>
                                    <th valign="top" style="padding: 0; text-align: left; font-size: 1px; line-height: 1px;" class="horizontal-gutter" bgcolor="#FFFFFF" height="20" align="left">&nbsp;</th>
                                  </tr>
                                </tbody>
                              </table>
                            </div>
                            <div>
                              <table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
                                <tbody>
                                  <tr>
                                    <th valign="top" style="padding: 0; text-align: left;" class="block-horz-container horizontal-grid" bgcolor="#FFFFFF" align="left">
                                      <table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
                                        <tbody>
                                          <tr>
                                            <th valign="top" style="padding: 0; text-align: left; font-size: 1px; line-height: 1px;" class="vertical-gutter" width="10" align="left">&nbsp;</th>
                                            <th valign="top" style="padding: 0; border: 1px solid #000000; text-align: left;" class="border left-block vertical-grid" width="280" align="left">
                                              <table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
                                                <tbody>
                                                  <tr>
                                                    <th valign="top" style="padding: 0; text-align: left;" class="vertical-grid" width="280" align="left">
                                                      <table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
                                                        <tbody>
                                                          <tr>
                                                            <th valign="top" style="padding: 0; text-align: left;" class="image-container" width="280" align="left"><img src="https://placehold.it/280x150" width="280" height="150" alt="" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; display: block;"></th>
                                                          </tr>
                                                          <tr>
                                                            <th valign="top" style="mso-line-height-rule: exactly; padding: 0; text-align: center; font-family: Arial, sans-serif; font-size: 15px; line-height: 18px; font-weight: normal; color: #000000; padding-top: 15px; padding-bottom: 5px;" class="pad-top-15 pad-bottom-5 text-container" width="280" align="center">LEFT BLOCK</th>
                                                          </tr>
                                                          <tr>
                                                            <th valign="top" style="mso-line-height-rule: exactly; padding: 0; padding-left: 10px; padding-right: 10px; text-align: center; font-family: Arial, sans-serif; font-size: 15px; line-height: 18px; font-weight: normal; color: #000000; padding-top: 10px; padding-bottom: 10px;" class="fs-12 pad-top-10 pad-bottom-10 pad-sides-10 text-container" width="280" align="center">Eiusmod proident tempor esse elit ea nulla quis ex laboris officia sit dolor culpa. Quis aute ipsum eiusmod occaecat commodo. Ad est qui nostrud consectetur quis cillum ut aute voluptate amet eu deserunt.<br>sdasdsdsd<br>sdsds</th>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </th>
                                                  </tr>
                                                  <tr>
                                                    <th valign="text-bottom" style="padding: 0; width: 280px; display: table-cell; bottom: 0; text-align: left; height: 100%; vertical-align: text-bottom;" class="play vertical-grid" width="280" align="left">
                                                      <table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
                                                        <tbody>
                                                          <tr>
                                                            <th valign="bottom" style="padding: 0; height: 100%; text-align: left; padding-top: 10px; padding-bottom: 20px;" class="pad-top-10 pad-bottom-20 full-height mobile-display-block button-container" width="280" align="left">
                                                              <table cellpadding="0" cellspacing="0" border="0" width="100%" role="presentation">
                                                                <tbody>
                                                                  <tr>
                                                                    <th valign="top" style="padding: 0;">
                                                                      <table cellpadding="0" cellspacing="0" border="0" width="auto" style="margin:0 auto" role="presentation" align="center">
                                                                        <tbody>
                                                                          <tr>
                                                                            <th valign="middle" style="mso-line-height-rule: exactly; padding: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #444444; text-align: center;" align="center"><a style="-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:10px 20px;display:inline-block;text-decoration:none;text-align:center;color:#FFFFFF;border:1px solid #444444;font-family:Arial, sans-serif;font-size:15px;line-height:18px;font-weight:normal" href="#" target="_blank">Click here</a></th>
                                                                          </tr>
                                                                        </tbody>
                                                                      </table>
                                                                    </th>
                                                                  </tr>
                                                                </tbody>
                                                              </table>
                                                            </th>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </th>
                                                  </tr>
                                                </tbody>
                                              </table>
                                            </th>
                                            <th valign="top" style="padding: 0; text-align: left; font-size: 1px; line-height: 1px;" class="vertical-gutter" width="20" align="left">&nbsp;</th>
                                            <th valign="top" style="padding: 0; border: 1px solid #000000; text-align: left;" class="border right-block vertical-grid" width="280" align="left">
                                              <table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
                                                <tbody>
                                                  <tr>
                                                    <th valign="top" style="padding: 0; text-align: left;" class="vertical-grid" width="280" align="left">
                                                      <table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
                                                        <tbody>
                                                          <tr>
                                                            <th valign="top" style="padding: 0; text-align: left;" class="image-container" width="280" align="left"><img src="https://placehold.it/280x150" width="280" height="150" alt="" style="outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; display: block;"></th>
                                                          </tr>
                                                          <tr>
                                                            <th valign="top" style="mso-line-height-rule: exactly; padding: 0; text-align: center; font-family: Arial, sans-serif; font-size: 15px; line-height: 18px; font-weight: normal; color: #000000; padding-top: 15px; padding-bottom: 5px;" class="pad-top-15 pad-bottom-5 text-container" width="280" align="center">RIGHT BLOCK</th>
                                                          </tr>
                                                          <tr>
                                                            <th valign="top" style="mso-line-height-rule: exactly; padding: 0; padding-left: 10px; padding-right: 10px; text-align: center; font-family: Arial, sans-serif; font-size: 15px; line-height: 18px; font-weight: normal; color: #000000; padding-top: 10px; padding-bottom: 10px;" class="fs-12 pad-top-10 pad-bottom-10 pad-sides-10 text-container" width="280" align="center">Eiusmod proident tempor esse elit ea nulla quis ex laboris officia sit dolor culpa. Quis aute ipsum eiusmod occaecat commodo. Ad est qui nostrud consectetur quis cillum ut aute voluptate amet eu deserunt.</th>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </th>
                                                  </tr>
                                                  <tr>
                                                    <th valign="text-bottom" style="padding: 0; width: 280px; display: table-cell; bottom: 0; text-align: left; height: 100%; vertical-align: text-bottom;" class="play horizontal-grid" width="280" align="left">
                                                      <table cellpadding="0" cellspacing="0" border="0" width="100%" style="min-width:100%" role="presentation">
                                                        <tbody>
                                                          <tr>
                                                            <th valign="bottom" style="padding: 0; height: 100%; text-align: left; padding-top: 10px; padding-bottom: 20px;" class="pad-top-10 pad-bottom-20 full-height mobile-display-block button-container" width="280" align="left">
                                                              <table cellpadding="0" cellspacing="0" border="0" width="100%" role="presentation">
                                                                <tbody>
                                                                  <tr>
                                                                    <th valign="top" style="padding: 0;">
                                                                      <table cellpadding="0" cellspacing="0" border="0" width="auto" style="margin:0 auto" role="presentation" align="center">
                                                                        <tbody>
                                                                          <tr>
                                                                            <th valign="middle" style="mso-line-height-rule: exactly; padding: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #444444; text-align: center;" align="center"><a style="-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:10px 20px;display:inline-block;text-decoration:none;text-align:center;color:#FFFFFF;border:1px solid #444444;font-family:Arial, sans-serif;font-size:15px;line-height:18px;font-weight:normal" href="#" target="_blank">Click here</a></th>
                                                                          </tr>
                                                                        </tbody>
                                                                      </table>
                                                                    </th>
                                                                  </tr>
                                                                </tbody>
                                                              </table>
                                                            </th>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </th>
                                                  </tr>
                                                </tbody>
                                              </table>
                                            </th>
                                            <th valign="top" style="padding: 0; text-align: left; font-size: 1px; line-height: 1px;" class="vertical-gutter" width="10" align="left">&nbsp;</th>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </th>
                                  </tr>
                                </tbody>
                              </table>
                            </div>
                          </th>
                        </tr>
                      </tbody>
                    </table>
                  </th>
                </tr>
              </tbody>
            </table>
          </body>


`