I'm trying to get the buttons to line up at the bottom of the columns with the text being top aligned. I've had a number of attempts, but below I've attempted valign="bottom" and the vertical-align:bottom; css on the middle column without success. Adding alignment to the main table containing each column (with the class table) will shift all content within the table to the bottom. Any help would be appreciate, thanks!
<!-- START THREE COLUMNS -->
<tr>
<td style="padding: 30px 0 40px 0;">
<table width="100%" style="border-spacing:0;" role="presentation">
<tr>
<td class="three-columns" style="padding:0;font-size:0;text-align: center;">
<!--[if mso]>
<table width="100%" style="border-spacing:0;" role="presentation">
<tr>
<td width="200" valign="top" style="padding: 0;">
<![endif]-->
<table class="column" style="border-spacing:0;width: 100%;max-width: 200px;display: inline-block;vertical-align: top;" role="presentation">
<tr>
<td class="padding" style="padding:15px;">
<table class="content" style="border-spacing:0;text-align: center;" role="presentation">
<tr>
<td style="padding:10px 10px 20px 10px;">
<p style="font-size: 15px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum quisquam nostrum, reprehenderit consequatur odio sint sed, illo adipisci laudantium soluta animi tempora qui obcaecati maiores aut. Laboriosam esse expedita dolorum.</p>
</td>
</tr>
<tr>
<td align="center">
<table align="center" role="presentation" style="border-spacing:0;">
<tr>
<td align="center" style="border-radius:10px;" bgcolor="#fff">
<a href="https://example.com/14" target="_blank" style="font-size: 15px;font-weight: bold;text-decoration: none;color: #000;background-color: #fff;padding:8px 20px;border: 1px solid #fff;border-radius: 10px;display: inline-block;">
Email Audience
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]>
</td><td width="200" valign="top" style="padding: 0;">
<![endif]-->
<table class="column" style="border-spacing:0;width: 100%;max-width: 200px;display: inline-block;" role="presentation">
<tr>
<td class="padding" style="padding:15px;">
<table class="content" style="border-spacing:0;text-align: center;" role="presentation">
<tr>
<td style="padding:10px 10px 20px 10px;">
<p style="font-size: 15px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas explicabo iure praesentium obcaecati eaque? Quod, assumenda.</p>
</td>
</tr>
<tr>
<td align="center" style="vertical-align: bottom;" valign="bottom">
<table align="center" role="presentation" style="border-spacing:0; vertical-align: bottom;" valign="bottom">
<tr>
<td align="center" style="border-radius:10px;vertical-align: bottom;" bgcolor="#000" valign="bottom">
<a href="https://example.com/16" target="_blank" style="font-size: 15px;font-weight: bold;text-decoration: none;color: #ffffff;background-color: #000;padding:8px 20px;border: 1px solid #000;border-radius: 10px;display: inline-block;">
Second Button
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]>
</td><td width="200" valign="top" style="padding: 0;">
<![endif]-->
<table class="column" style="border-spacing:0;width: 100%;max-width: 200px;display: inline-block;vertical-align: top;" role="presentation">
<tr>
<td class="padding" style="padding:15px;">
<table class="content" style="border-spacing:0;text-align: center;" role="presentation">
<tr>
<td style="padding:10px 10px 20px 10px;">
<p style="font-size: 15px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam ipsum aspernatur neque odit dolorem molestias consequatur enim consectetur dicta ab rem provident deserunt expedita, id quas doloremque illo dignissimos! Blanditiis!</p>
</td>
</tr>
<tr>
<td align="center">
<table align="center" role="presentation" style="border-spacing:0;">
<tr>
<td align="center" style="border-radius:10px;" bgcolor="#fff">
<a href="https://example.com/18" target="_blank" style="font-size: 15px;font-weight: bold;text-decoration: none;color: #000;background-color: #fff;padding:8px 20px;border: 1px solid #fff;border-radius: 10px;display: inline-block;">
Third Button
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<!-- END THREE COLUMNS -->
In order to achieve responsiveness, the typical way to do 3 columns in email is to separate the tables - as shown in your work. Therefore, you can't match them using vertical-align, since each table doesn't know what the other tables are doing.
The only way forward is to add space manually, e.g. add padding to the <td>, e.g.:
<td align="center" style="padding-top:20px;border-radius:10px;" bgcolor="#000">
But then you may need to look at what padding you need for mobile, or only add this padding for desktop.
I prefer a mobile-first approach, as there are more mobiles that don't accept <style> blocks than desktops that don't accept <style> blocks.
You can do this:
<style>
@media screen and (min-width:600px) {
.desktopPadding {
padding-top: 20px!important;
}
}
</style>
<td align="center" class="desktopPadding" style="padding:0;border-radius:10px;mso-padding-alt: 20px 0 0 0;" bgcolor="#000">
Note the Outlook (Windows desktop) code mso-padding-alt, since it doesn't accept @media queries.
Alternatively, you can use other methods of spacing like <p style="margin:20px 0 0 0;line-height:0;font-size:0;"> </p>