Email module breaking after editing in email editor

[haliddelkic-cr]

Hi community,

I am struggling to pinpoint what is causing a module in my email to break. 
I've created a new email directly from the template (i.e. not cloned). Both sections in my example are editable text modules.

When I try to edit via WYSIWYG text editor, I end up with examples shown in screenshot below. My new text ends up positioned below the editable area and font styling breaks. 

"mktoModule" section code from the template below. Any direction would be appreciated. 

<tr class="mktoModule" id="twocol-imageleft" mktoname="TwoCol - Left Img">
<td>
<table class="es-content" cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:fixed !important;width:100%">
<tbody>
<tr>
<td align="center" style="padding:0;Margin:0">
<table class="es-content-body" cellspacing="0" cellpadding="0" bgcolor=${twoColImgLeftBackgroundColor} align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:${twoColImgLeftBackgroundColor};width:600px">
<tbody>
<tr>
<td align="left" style="padding:20px;Margin:0">
<!--[if mso]>
<table style="width:560px" cellpadding="0" cellspacing="0">
<tr>
<td style="width:230px" valign="top">
<![endif]--> 
<table class="es-left" cellspacing="0" cellpadding="0" align="left" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;float:left">
<tbody>
<tr>
<td class="es-m-p0r es-m-p20b" valign="top" align="center" style="padding:0;Margin:0;width:230px">
<table cellspacing="0" cellpadding="0" width="100%" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tbody>
<tr>
<td align="center" style="padding:0;Margin:0;font-size:0px"><a target="_blank" href=${twoColImgLeftLink} style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;text-decoration:underline;color:#333333;font-size:14px"><img class="adapt-img" 
src=${twoColImgLeftImage} alt=${twoColImgLeftAltText} style="display:block;border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic" height="131" title=${twoColImgLeftAltText} width="229" /></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
<td style="width:10px"></td>
<td style="width:320px" valign="top">
<![endif]--> 
<table cellspacing="0" cellpadding="0" align="right" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tbody>
<tr>
<td class="es-m-p20b" align="left" style="padding:0;Margin:0;width:320px">
<table cellspacing="0" cellpadding="0" width="100%" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
<tbody>
<tr>
<td align="left" style="padding:0;Margin:0">
<h3 style="Margin:0;line-height:22px;mso-line-height-rule:exactly;font-family:georgia, times, 'times new roman', serif;font-size:18px;font-style:normal;font-weight:normal;color:#333333">
<a target="_blank" href=${twoColImgLeftLink} 
style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;text-decoration:underline;color:#333333;font-size:18px">
<div class="mktoText" id="left-story-headline" mktoName="Headline">THIS IS A HEADLINE</div>
</a>
</h3>
</td>
</tr>
<tr>
<td align="left" style="padding:0;Margin:0;padding-top:5px;padding-bottom:5px">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:tahoma, verdana, segoe, sans-serif;line-height:17px;color:#333333;font-size:14px"><span class="mktoText" id="left-story-text" mktoName="Text">THIS IS SOME TEXT</span>
</p>
</td>
</tr>
<tr>
<td align="left" style="padding:0;Margin:0">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:tahoma, verdana, segoe, sans-serif;line-height:17px;color:#333333;font-size:14px"><a href=${twoColImgLeftLink} target="_blank" 
style="-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;text-decoration:underline;color:#333333;font-size:14px"><span class="mktoText" id="left-story-textCTA" mktoName="Text CTA">Read More +</span></a></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]--> 
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>

[SrilekhaVV]

Hi,

<td align="left" style="padding:0;Margin:0;padding-top:5px;padding-bottom:5px">
<p style="Margin:0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-family:tahoma, verdana, segoe, sans-serif;line-height:17px;color:#333333;font-size:14px"><span class="mktoText" id="left-story-text" mktoName="Text">THIS IS SOME TEXT</span>
</p>
</td>

instead of the above code try using the code below instead of p - tag use div and give styles to td - tag itself so that they work in outlook

<td class="primary-font text" style="hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;-ms-text-size-adjust: 100%;font-family:'Lato', Arial, sans-serif;color: #4c4d52;font-size: 14px;line-height: 20px;text-align: center;border-collapse: collapse;"> 
                                      <div class="mktoText" mktoname="Text" id="text">
                                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum officiis dolorum, nulla, mollitia ducimus iure modi perferendis tenetur ea illum veniam aut sapiente deserunt repellendus. Excepturi illo numquam sint harum.
                                      </div></td> 

Thanks,

Srilekha