how to set 2 buttons in 2 tables 1 under the other on mobile , html django templating

My html is going to be sent as an email via a email service. so it will be read/displayed in gmail, yahoo mail, outlook and etc. That is why I cannot use inline-flex. (I tried making classes using max-width but they are ignored). This is what I have in my file, which I include where it is needed:

<table width="100%" cellpadding="0" cellspacing="0" border="0" class="container" bgcolor="#ffffff" align="center">
    <tr>
        <td align="left" style="width: 180px;min-width: 50%;max-width: 100%">
            <div align="center" style="font-family: 'Lato', sans-serif; font-size: 14px; border-radius: 6px; color: #ffffff;line-height:15px;background-color: #24b646;width: 180px;padding: 0px 10px 0px 10px;margin: 30px 0 30px 60px; height: 45px;" class="mobileWidth100 mobilePadding0">
                <a width="auto" href="{{extra.manage_team}}" target="_blank" alias="" style="font-family: 'Lato', sans-serif; text-decoration: none; color: #ffffff;font-weight:bold; letter-spacing:1px;height: 45px;line-height: 15px;vertical-align: middle;display:table-cell;">{% trans 'Manage Team'%}</a>
            </div>
        </td>
        <td align="left" style="width: 180px;min-width: 50%;max-width: 100%">
            <div align="center" style="font-family: 'Lato', sans-serif; font-size: 14px; border-radius: 6px; color: #ffffff; border: 1px solid #24b646; line-height:15px;background-color: #ffffff;width: 180px;padding: 0px 10px 0px 10px;height: 45px;">
                <a width="auto" href="{{extra.billing_overview}}" target="_blank" alias="" style="font-family: 'Lato', sans-serif; text-decoration: none; color: #24b646; font-weight:bold; letter-spacing:1px;height: 45px;line-height: 15px;vertical-align: middle;display:table-cell;">{% trans 'Billing Overview'%}</a>
            </div>
        </td>
    </tr>
</table>

This is how it looks on desktop which partially fine (I will need to bring the first button more to the left):

And this is how it looks on mobile, as you can see, clearly broken:

All I want is to have 1 objects one near the other, and then on mobile, the second to go down, and both to have the same width as their parents

Solution

This is what made it work after all those tries:

 <table cellpadding="0" cellspacing="0" border="0" class="container" bgcolor="#ffffff" align="center" style="overflow-x:auto;margin: 30px 60px 0px 60px; width: calc(100% - 120px);">
<tr>
    <td>
      <table style="display: inline-block; vertical-align: middle; margin-right: 5px; margin-bottom: 20px;">
        <tr>
          <td
            align="left"
            style="width: 180px;min-width: 50%;max-width: 100%"
          >
            <div
              align="center"
              style="font-family: 'Lato', sans-serif; font-size: 14px; border-radius: 6px; color: #ffffff;line-height:15px;background-color: #24b646;width: 180px;padding: 0px 10px 0px 10px;height: 45px;"
            >
              <a
                width="auto"
                href="{{ extra.manage_team }}"
                target="_blank"
                alias=""
                style="font-family: 'Lato', sans-serif; text-decoration: none; color: #ffffff;font-weight:bold; letter-spacing:1px;height: 45px;line-height: 15px;vertical-align: middle;display:table-cell;"
                >{% trans 'Manage Team'%}</a
              >
            </div>
          </td>
        </tr>
      </table>

      <table style="display: inline-block; vertical-align: middle;margin-bottom: 20px;">
        <tr>
          <td
            align="left"
            style="width: 180px;min-width: 50%;max-width: 100%"
          >
            <div
              align="center"
              style="font-family: 'Lato', sans-serif; font-size: 14px; border-radius: 6px; color: #ffffff; border: 1px solid #24b646; line-height:15px;background-color: #ffffff;width: 180px;padding: 0px 10px 0px 10px;height: 45px;"
            >
              <a
                width="auto"
                href="{{ extra.billing_overview }}"
                target="_blank"
                alias=""
                style="font-family: 'Lato', sans-serif; text-decoration: none; color: #24b646; font-weight:bold; letter-spacing:1px;height: 45px;line-height: 15px;vertical-align: middle;display:table-cell;"
                >{% trans 'Billing Overview'%}</a
              >
            </div>
          </td>
        </tr>
      </table>
    </td>
  </tr>