同一层不同表的位置div

Question

我正在努力构建电子邮件模板。我想要一个包含 2 个主表数据的表。然而，主要目标是让绿色按钮（您可以在下图中看到）处于同一级别，而不管它们上方的文本有多长。因此，例如，如果左侧按钮上方的文本比右侧按钮上方的文本长，则右侧按钮应与左侧按钮对齐，以便在电子邮件中处于同一水平。

问题是这个 HTML 代码用于电子邮件模板，所以我需要使用 HTML 4.01 Transitional，其中 flexbox 等功能不起作用。你有什么想法吗？

<table cellpadding="0" cellspacing="0" class="#" style="background-color:#ffffff;min-width:100%;" width="100%">
 
    <tr>
     <td class="#">
   
          <table cellpadding="0" cellspacing="0" style="width:100%">
           
            <tr> 

             <!-- LEFT SECTION -->
             <td class="mainTD" style="width:50%;padding-right:10px" valign="top">

              <table cellpadding="0" cellspacing="0" class="#" style="background-color:transparent;min-width:100%; padding: 0px 0px 0px 0px;" width="100%">
                    <tr>
                     <td class="#" style="padding:0px"  align="center">
                          <!-- LEFT IMAGE URL HERE --> 
                             <a alias="#" conversion="false" data-linkto="https://" href="#" target="_blank" title=""><img alt="#" data-assetid="#" src="#" style="display: block; padding: 0px; height: auto; width: 100%; border: 0px;" width="270">
                          </a>
                        </td>
                    </tr>
                </table>

              <table cellpadding="0" cellspacing="0"  style="background-color:transparent;min-width:100%" width="100%">
               
                <!-- LEFT HEADING HERE -->
                <tr>
                    <td class="#" style="padding:10px 0px 10px 0px">
                    LEFT HEADING
                    </td>
                 </tr>

                 <!-- LEFT TEXT HERE -->
                <tr>
                    <td align="left" class="#" style="font-family:Arial,helvetica,sans-serif;padding:0px 0px 10px 0px">
                    LEFT TEXT 
                    </td>
                </tr>

             </table>
        
        <!-- LEFT BUTTON STARTS HERE -->
                
            <div align="left" style="padding-right:0px;">
                <table border="0" cellpadding="0" cellspacing="0" style="padding: 5px 0px 20px 0px;">
                    
                    <tr>
                    <th align="center" bgcolor="#ffbcod" style="padding:13px 50px;vertical-align:middle;border-radius:5px;" valign="middle">
                    <div>
                        <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                        
                        <tr>
                        <td align="left" 
                            <font style="color:#292929;"><a alias="#" class="lightmode-style" href="" target="_blank">LEFT BUTTON TITLE
                            
                            </a></font>
                        </td>
                            </tr>
                        </table>
                        </div>
                    </th>
                    </tr>
                </table>
                </div>
                
            </td>
                        
                        <!-- RIGHT SECTION -->
                        
            <td class="mainTD" style="width:50%;padding-left:10px" valign="top">

              <table cellpadding="0" cellspacing="0" class="#" style="min-width:100%; padding: 0px 0px 0px 0px;" width="100%">
                    <tr>
                        <td class="#" align="center">
                             <!-- RIGHT IMAGE URL HERE -->
                                <a alias="#" conversion="false" data-linkto="https://" href="#" target="_blank" title=""><img alt="#" data-assetid="#" src="#" style="display: block; padding: 0px; height: auto; width: 100%; border: 0px;" width="270"></a>
                        </td>
                    </tr>
                </table>

                <table cellpadding="0" cellspacing="0" class="#" style="background-color:transparent;min-width:100%" width="100%">

                    <!-- RIGHT HEADING HERE -->
                    <tr>
                        <td class="#" style="padding:10px 0px 10px 0px">
                     RIGHT HEADING
                        </td>
                    </tr>

                    <!-- RIGHT TEXT HERE -->
                    <tr>
                        <td align="left" class="#" style="font-family:Arial,helvetica,sans-serif;padding:0px 0px 10px 0px">
                          TEXT 2
                        </td>
                    </tr>
                </table>
                
                <!-- RIGHT BUTTON STARTS HERE -->

               <div align="left" style="padding-right:0px">
                <table border="0" cellpadding="0" cellspacing="0" style="padding:5px 0px 20px 0px;">
                    <tr>
                        <th align="center" bgcolor="#ffbcod" style="padding:13px 50px;vertical-align:middle;border-radius:5px" valign="middle">
                            <div>
                                <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
                                 <tr>
                                    <td align="left" 
                                        <font style="color:#292929;"><a alias="#" class="lightmode-style" conversion="false" data-linkto="https://" href="#">RIGHT BUTTON TITLE
                                        </a></font>
                                     </td>
                                    </tr>
                                </table>
                            </div>
                        </th>
                        </tr>
                    </table>
                </div>

                
                    </td>
                        <!-- END OF SECTIONS -->

                </tr>
            </table>
        </td>
    </tr>
</table>

我试过使用 flexbox 布局模式，但由于它是 HTML 4.01，所以它不起作用。我还尝试在带有按钮的 div 上使用绝对位置，在其上方的“th”上使用相对位置，但它不起作用。