Oulook on windows - self wrapping tags

I'm trying to get buttons to wrap properly inside their cell, I've given the cell a max-width as well as a ghost table of 200px. I'm relying on the width to not extend past 200px in order for the span to automatically wrap to the 2nd row. Which works fine everywhere else, except Outlook on windows.

I've also attempted to use <v:rect> but since I don't have a defined width, this doesn't work. How can I make my list of spans wrap correctly on Windows Outlook?

<table width="100%" style="border-spacing:0; vertical-align: top;width:100%; max-width:200px;display: inline-block;" role="presentation">
   <tr>
      <td style="vertical-align: top;font-size: 12px; margin: 0;font-weight:bold;line-height: 20px;white-space: nowrap;-webkit-text-size-adjust: none;">
         Area |
      </td>
      <td style="vertical-align: middle;text-align:left;">                                             
         <!--[if (gte mso 9)|(IE)]>
            <table width="100%" style="border-spacing: 0;" role="presentation">
            <tr>
            <td width="180" valign="top" style="padding: 0;">
         <![endif]-->
               <span class="area" style="font-size: 12px;margin: 0;Margin-right:2px;padding: 0 4px;background-color:#8936F3;color:#ffffff;margin-top: 0;line-height: 20px;border-radius: 2px;display: inline-block;text-align: center;white-space: nowrap;-webkit-text-size-adjust: none;">
                  <!--[if mso]>
                  <i style="letter-spacing: 3px; mso-font-width: -100%; mso-text-raise: 1pt;">&nbsp;</i>
                  <![endif]-->
                  AB
                  <!--[if mso]>
                  <i style="letter-spacing: 3px; mso-font-width: -100%;mso-text-raise: -1pt;">&nbsp;</i>
                  <![endif]--> 
               </span>
               
               <span class="area" style="font-size: 12px;margin: 0;Margin-right:2px;padding: 0 4px;background-color:#8936F3;color:#ffffff;margin-top: 0;line-height: 20px;border-radius: 2px;display: inline-block;text-align: center;white-space: nowrap;-webkit-text-size-adjust: none;">
                  <!--[if mso]>
                  <i style="letter-spacing: 3px; mso-font-width: -100%; mso-text-raise: 1pt;">&nbsp;</i>
                  <![endif]-->
                  CDEF
                  <!--[if mso]>
                  <i style="letter-spacing: 3px; mso-font-width: -100%;mso-text-raise: -1pt;">&nbsp;</i>
                  <![endif]--> 
               </span>
               
               <span class="area" style="font-size: 12px;margin: 0;Margin-right:2px;padding: 0 4px;background-color:#8936F3;color:#ffffff;margin-top: 0;line-height: 20px;border-radius: 2px;display: inline-block;text-align: center;white-space: nowrap;-webkit-text-size-adjust: none;">
                  <!--[if mso]>
                  <i style="letter-spacing: 3px; mso-font-width: -100%; mso-text-raise: 1pt;">&nbsp;</i>
                  <![endif]-->
                  GHI
                  <!--[if mso]>
                  <i style="letter-spacing: 3px; mso-font-width: -100%;mso-text-raise: -1pt;">&nbsp;</i>
                  <![endif]--> 
               </span>
         <!--[if (gte mso 9)|(IE)]>
            </td>
            </tr>
            </table>
         <![endif]-->
      </td>
   </tr>
</table>

This is roughly the intended look: (it works fine in Mac OS Outlook and other clients, just not Windows Outlook.

But this is what I'm getting:

Solution

You'll need to use aligned ghost tables to make this work in Outlook, including having the spacing between the buttons.

A table like the one below, wrapping each individual span will do the trick. You may need to make other tweaks elsewhere, but this will do the basics of what you need:

<!--[if mso]><table align="left" role="presentation"><tr><td><![endif]-->
  <span class="area" style="...">...</span>
<!--[if mso]></td></tr></table><![endif]-->

Sidenote - Setting a width on a table cell when you're setting the table width to 100%, is kind of against what the table cell naturally does.
I'm not aware if it works anywhere as I haven't tried it, but essentially a table cell will fill it's container's width, including when there are multiple table cells. Setting a width on a cell when there are multiple cells makes sense as this will distribute the cells to match your intended design. But, when there is one cell you're better off setting that width on the table.

As I noted, there is a possibility a width on the cell will work when the table is set to 100%, but if it doesn't work somewhere, you'll then get inconsistencies in rendering results.

Setting the width on the table of a one column table avoids any issues. Removing the 100% width on the table and just leaving the width on the table cell will also work, but then you may as well just declare it on the table.