I am currently creating a template that has this CTA button that has an overlapping image on the side.
See button design here
I tried to do it and was able to do it in Apple mail and gmail but not on mobile view.

Please help me, I am a bit stuck on what I can do about it. I would really appreciate the help and thank you in advance.

I tried the following code:

<!-- Faux -->
<tr>
        <td>
            <div class="content-block" style="max-height:0px;" align="center">
                <table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
                    <tr>
                        <!--[if mso]>
                        <td>
                            <v:rect stroked="f" filled="false" style="position:absolute; top:100px; width:255pt;">
                                <v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;">
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
                                        <tr>
                        <![endif]-->
                                            <td valign="top" class="text-col" style="font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:22px;color:#ffffff;font-weight:400;text-align:left; padding:0 0 10px 20px; max-width:225px;">
                                                <div class="text-col-inner left" style="width:310px;">
                                                    <p style="margin:5px 0px 0px 200px; font-family:Arial, Helvetica, sans-serif;font-size:16px;line-height:42px;color:#ffffff;font-weight:700;">Register now</p>
                                                </div>
                                            </td>
                                            <!--[if mso]>
                                        </tr>
                                    </table>
                                </v:textbox>
                            </v:rect>
                        </td>
                        <td>
                            <v:rect stroked="f" filled="false" style="position:absolute; top:-16px; left:-15px; width:203pt;">
                                <v:textbox inset="0,0,0,0" style="mso-fit-shape-to-text:true;">
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation">
                                        <tr>
                                            <td>
                                            <![endif]-->
                                                <!--[if !mso]><!-->
                                            <td class="man-wrapper" valign="top">
                                                <!--<![endif]-->
                                                <img class="m-right" alt="" src="https://litmus-builder.s3.amazonaws.com/503cb2a6-4f57-4176-97c4-85f3e216144e" style="width:48px; margin-right: 150px;" height="48" />
                                            </td>
                        <!--[if mso]>
                                        </tr>
                                    </table>
                                </v:textbox>
                            </v:rect>
                        </td>
                        <![endif]-->
                    </tr>
                </table>
            </div>
            
            <div>
             
                <!--[if !mso]><!-->
                <div class="ml-left" style="background:#7e9751; border-radius:0px; height:30px; width:150px; margin-left: 200px;  margin-top: 10px" align="center"></div>
                
                <!--<![endif]-->
                <!--[if mso]>
                <v:roundrect fill="true" stroked="f" arcsize="4%" style="width:420pt; height:214pt;">
                    <v:fill type="gradient" color="#7e9751" color2="#7e9751" colors="100% #7e9751,100% #7e9751" />
                </v:roundrect>
                <![endif]-->
            </div>
        </td>
    </tr>
<!-- /Faux -->