How to make two tables horizontal on the same like in html

Hello I am trying to make two tables (one with an image) horizontal on the same line. I want it to be so when the screen changes to mobile, the table on the left goes on top of the right one vertically.

  <table style="display: inline-block" cellpadding="0" cellspacing="0"
                                       border="0" width="100%">
                                    <tr>
                                        <td align="center" valign="top"
                                            style="background-color: #ffffff; padding-bottom: 0">
                                            <img src="#"
                                                 style=" height: auto; display: block; border: 0;">
                                        </td>
                                    </tr>
                                </table>


                                        <table style="display: inline-block" cellpadding="0" cellspacing="0"
                                               border="0" width="100%">
                                            <tr>
                                        <td align="left" valign="top"
                                            style="background-color: #ffffff; padding-bottom: 0">
                                            <p style="font-size: 16px; line-height:20px; color:#043667; margin:10px 0; font-family: Arial, Narrow, Helvetica, sans-serif">
                                                <span style="color: #9d0059; font-weight: bold">text1,</span> text 2”
                                                <br><span style="color: #9d0059"><i>-HAEGARDA Advocate</i></span>
                                            </p>
                                        </td>
                                    </tr>
                                </table>

Solution

You're on the right track, but you need to get rid of the width:100%, otherwise two of them won't fit side by side in the same line!

Also, I'd use display:inline-table rather than display:inline-block.

table {
  display: inline-table;
  border-spacing: 0;
  border: 0;
}

th,td {
  padding: 0
}

<table>
  <tr>
    <td align="center" valign="top" style="background-color: #ffffff; padding-bottom: 0">
      <img src="#" style=" height: auto; display: block; border: 0;">
    </td>
  </tr>
</table>


<table>
  <tr>
    <td align="left" valign="top" style="background-color: #ffffff; padding-bottom: 0">
      <p style="font-size: 16px; line-height:20px; color:#043667; margin:10px 0; font-family: Arial, Narrow, Helvetica, sans-serif">
        <span style="color: #9d0059; font-weight: bold">text1,</span> text 2”
        <br><span style="color: #9d0059"><i>-HAEGARDA Advocate</i></span>
      </p>
    </td>
  </tr>
</table>