title: How to adjust table to view content left and right
body: <p>I have this code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt; 
      &lt;title&gt;Mizona&lt;/title&gt; 
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; 
      &lt;meta name="viewport" content="width=device-width" /&gt; 
      &lt;style type="text/css"&gt;
        #logo img {
          outline: none;
          text-decoration: none;
          -ms-interpolation-mode: bicubic;
          width: auto;
          float: none !important;
          clear: both;
          display: block;
        }
  
        td {
          word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; font-family:'Verdana', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:12px; margin:0; padding:0; 
        }
  
        .desktop-only {
          display: block;
        }
  
        .mobile-only {
          display: none;
        }
  
        .no-spacing {
          margin: 0px;
          padding: 0px;
        }
  
        #cover-content a {
          color: #0EABD6;
        }
  
        img {
          max-width: 100%;
        }
  
        #cover-content ul {
          padding-left: 15px;
        }
  
        #socialicons img {
          outline: none;
          text-decoration: none;
          -ms-interpolation-mode: bicubic;
          width: auto;
          float: none !important;
          clear: both;
          display: inline-block !important;
          border: none;
        }
        #graphic img {
          outline: none;
          text-decoration: none;
          -ms-interpolation-mode: bicubic;
          width: auto;
          max-width: 100%;
          float: none !important;
          clear: both;
          display: inline-block !important;
        }
  
        .pad-right-5 {
          padding-right: 5px;
        }
  
        .pad-right-10 {
          padding-right: 10px;
        }
  
        .pad-right-20 {
          padding-right: 20px;
        }
  
        .pad-top-10 {
          padding-top: 10px;
        }
        
        .mobile-center {
          text-align: left !important;
        }
  
        @media only screen and (max-width: 600px) {
  
          .pad-right-10 {
            padding-right: 0px;
          }
  
          .desktop-only {
            display: none !important;
          }
          
          .mobile-center {
            text-align: center !important;
          }
  
          .mobile-only {
            display: block;
          }
  
          #logo img {
            width: 100% !important;
          }
  
          #logo-mobile img {
            width: 80% !important;
          }
  
          #cover-img img {
            max-width: 100%;
          }
  
          #graphic img {
            width: 100% !important;
            height: auto !important;
          }
          *[class].center {
            text-align:center !important;
            margin:0 auto !important;
          }
          *[class].bottom-pad{ padding-bottom:35px !important;}
          table[class="body"] table.columns td {
            width: auto !important;
          }
          table[class="body"] table.column td .list {
            width: auto !important;
          }
          table[class="body"] img {
            width: auto !important;
            height: auto !important;
            max-width: 100% !important;
          }
          table[class="body"] center {
            min-width: 0 !important;
          }
          table[class="body"] .container {
            width: 100% !important;
          }
          table[class="body"] .row {
            width: 100% !important;
            display: block !important;
          }
          table[class="body"] .wrapper {
            display: block !important;
            padding-right: 0 !important;
          }
          table[class="body"] .columns {
            table-layout: fixed !important;
            float: none !important;
            width: 100% !important;
            padding-right: 0px !important;
            padding-left: 0px !important;
            display: block !important;
          }
          table[class="body"] .column {
            table-layout: fixed !important;
            float: none !important;
            width: 100% !important;
            padding-right: 0px !important;
            padding-left: 0px !important;
            display: block !important;
          }
          table[class="body"] .wrapper.first .columns {
            display: table !important;
          }
          table[class="body"] .wrapper.first .column {
            display: table !important;
          }
          table[class="body"] table.columns td {
            width: 100% !important;
          }
          table[class="body"] table.column td {
            width: 100% !important;
          }
  
          table[class="body"] .columns td {
            width: 100% !important;
            display: block;
          }
          table[class="body"] .column td {
            width: 100% !important;
            display: block;
          }
  
          table[class="body"] td.offset-by-one {
            padding-left: 0 !important;
          }
          table[class="body"] td.offset-by-two {
            padding-left: 0 !important;
          }
          table[class="body"] td.offset-by-three {
            padding-left: 0 !important;
          }
          table[class="body"] td.offset-by-four {
            padding-left: 0 !important;
          }
          table[class="body"] td.offset-by-five {
            padding-left: 0 !important;
          }
          table[class="body"] td.offset-by-six {
            padding-left: 0 !important;
          }
          table[class="body"] td.offset-by-seven {
            padding-left: 0 !important;
          }
          table[class="body"] td.offset-by-eight {
            padding-left: 0 !important;
          }
          table[class="body"] td.offset-by-nine {
            padding-left: 0 !important;
          }
          table[class="body"] td.offset-by-ten {
            padding-left: 0 !important;
          }
          table[class="body"] td.offset-by-eleven {
            padding-left: 0 !important;
          }
          table[class="body"] table.columns td.expander {
            width: 1px !important;
          }
          table[class="body"] .right-text-pad {
            padding-left: 10px !important;
          }
          table[class="body"] .text-pad-right {
            padding-left: 10px !important;
          }
          table[class="body"] .left-text-pad {
            padding-right: 10px !important;
          }
          table[class="body"] .text-pad-left {
            padding-right: 10px !important;
          }
          table[class="body"] .hide-for-small {
            display: none !important;
          }
          table[class="body"] .show-for-desktop {
            display: none !important;
          }
          table[class="body"] .show-for-small {
            display: inherit !important;
          }
          table[class="body"] .hide-for-desktop {
            display: inherit !important;
          }
  
          .social-icon td img {
            width: 40px !important;
            height: 40px !important;
          }
        }
      &lt;/style&gt; 
    &lt;/head&gt; 
    &lt;body style="width:100% !important; min-width:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; text-align:left; line-height:19px; font-size:12px; margin:0; padding:0; background:#eeeeee; "&gt; 
      &lt;table class="body" style="border-spacing:0; border-collapse:collapse;  vertical-align:top; text-align:left; height:100%; width:100%; line-height:19px; font-size:12px; background:#eeeeee; margin:0; padding:0; " bgcolor="#EEEEEE"&gt; 
        &lt;tbody&gt; 
          &lt;tr style="vertical-align:top; text-align:left; padding:0; " align="left"&gt; 
            &lt;td class="center" align="center" valign="top" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:center; font-weight:normal; line-height:19px; font-size:12px; margin:0; padding:0; "&gt; 
              &lt;center style="width:100%; min-width:580px; "&gt; 
                &lt;table class="container mktoContainer" id="template-wrapper" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:580px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF"&gt; 
                  &lt;tbody&gt; 
                    &lt;tr class="mktoModule" id="main-header" mktoname="main-header" style="vertical-align:top; text-align:left; padding:0; " align="left"&gt; 
                      &lt;td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; vertical-align:top; text-align:left; margin:0; padding:0;" align="left" valign="top"&gt; 
                        &lt;table class="row" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:100%; position:relative; display:block; padding:0px; "&gt; 
                          &lt;tbody&gt; 
                            &lt;tr style="vertical-align:top; text-align:left; padding:0; " align="left"&gt; 
                              &lt;td class="wrapper last center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; position:relative; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; " align="left" valign="top"&gt; 
                                &lt;table class="twelve columns center desktop-only" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:580px; padding:0; display:table !important; "&gt; 
                                  &lt;tbody&gt; 
                                    &lt;tr style="vertical-align:top; text-align:left; padding:0; " align="left"&gt; 
                                      &lt;td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; font-size:12px; margin:0; padding:0px; " align="left" valign="top"&gt; 
                                        &lt;div class="mktEditable" id="logo" style="" mktoname="logo"&gt;
                                          &lt;img src="http://info.eoriginal.com/rs/907-BBE-942/images/nl-header-demand-gen-promo-v2.jpg" alt="eO Logo White.png" constrain="true" imagepreview="false" style="max-width: 600px;" /&gt;
                                        &lt;/div&gt; &lt;/td&gt; 
                                    &lt;/tr&gt; 
                                  &lt;/tbody&gt; 
                                &lt;/table&gt; &lt;/td&gt; 
                            &lt;/tr&gt; 
                          &lt;/tbody&gt; 
                        &lt;/table&gt; &lt;/td&gt; 
                    &lt;/tr&gt; 
                    
                    &lt;tr class="mktoModule" id="mod-padding-10" mktoname="mod-padding-10" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left"&gt; 
                      &lt;td style="padding: 10px 40px"&gt; &lt;/td&gt; 
                    &lt;/tr&gt; 
  
                    &lt;tr class="mktoModule" id="mod-cover" mktoname="mod-cover" style="text-align:left; padding:0; color: #555555;" align="left"&gt; 
                      &lt;td style="padding: 10px 40px"&gt; 
                        &lt;table class="columns" width="100%"&gt; 
                          &lt;tbody&gt;
                            &lt;tr valign="top"&gt; 
                              &lt;td align="left"&gt; 
                                &lt;div class="mktEditable" id="cover-img" mktoname="cover-img"&gt;
                                  &lt;h4 style="font-family: Verdana; color: #2ea049;"&gt;&lt;span style="font-size: 14px;"&gt;{{My.Campaign-Headline}}&lt;/span&gt;&lt;/h4&gt; 
                                  &lt;table border="0" cellspacing="0" cellpadding="0"&gt; 
                                  &lt;tbody&gt; 
                                    &lt;tr&gt; 
                                      &lt;td bgcolor="#0EABD6" style="padding: 12px 18px 12px 18px; border-radius:0px" align="center"&gt; 
                                        &lt;div id="cta2" class="mktEditable" style="" mktoname="cta2"&gt;
                                          &lt;p class="no-spacing"&gt;&lt;a href="{{my.Fulfillment-CTA-URL}}" target="_blank" style="font-size: 14px; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;"&gt;Request a Meeting&lt;/a&gt;&lt;/p&gt;
                                        &lt;/div&gt; 
                                      &lt;/td&gt; 
                                    &lt;/tr&gt; 
                                  &lt;/tbody&gt; 
                                &lt;/table&gt;
                                &lt;/div&gt; &lt;/td&gt; 
                            &lt;/tr&gt; 
                          &lt;/tbody&gt;
                        &lt;/table&gt; &lt;/td&gt; 
                    &lt;/tr&gt; 
                    
                    &lt;tr class="mktoModule" id="mod-cover" mktoname="mod-cover" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="right"&gt; 
                      &lt;td style="padding: 10px 40px"&gt; 
                        &lt;table class="columns" width="100%"&gt; 
                          &lt;tbody&gt;
                            &lt;tr valign="top"&gt; 
                              &lt;td align="right"&gt; 
                                &lt;div class="mktEditable" id="cover-img" mktoname="cover-img"&gt;
                                  &lt;p class="no-spacing"&gt;&lt;img src="{{my.Image-Thumb}}" width="250" /&gt;&lt;/p&gt;
                                &lt;/div&gt; &lt;/td&gt; 
                            &lt;/tr&gt; 
                          &lt;/tbody&gt;
                        &lt;/table&gt; &lt;/td&gt; 
                    &lt;/tr&gt; 
  
                    &lt;tr class="mktoModule" id="mod-content" mktoname="mod-content" style="vertical-align:top; text-align:left; padding:0; color: #555555;"&gt; 
                      &lt;td style="padding: 0px 40px"&gt; 
                        &lt;table class="columns" width="100%"&gt; 
                          &lt;tbody&gt;
                            &lt;tr valign="top"&gt; 
                              &lt;td align="left"&gt; 
                                &lt;div class="mktEditable" id="cover-content" mktoname="cover-content"&gt;
                                  &lt;p style="font-family: Verdana;"&gt;&lt;span style="font-size: 14px;"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/span&gt;&lt;/p&gt; 
                                 
                                &lt;/div&gt; &lt;br /&gt; 
                              &lt;/td&gt; 
                            &lt;/tr&gt; 
                          &lt;/tbody&gt;
                        &lt;/table&gt; 
                      &lt;/td&gt; 
                    &lt;/tr&gt; 
  
                    &lt;tr class="mktoModule" id="mod-cta" mktoname="mod-cta" style="vertical-align:top; padding:0;"&gt; 
                      &lt;td style="padding: 0px 40px;" align="center"&gt; 
                        &lt;table border="0" cellspacing="0" cellpadding="0"&gt; 
                          &lt;tbody&gt; 
                            &lt;tr&gt; 
                              &lt;td align="center"&gt; 
                                &lt;table border="0" cellspacing="0" cellpadding="0"&gt; 
                                  &lt;tbody&gt; 
                                    &lt;tr&gt; 
                                      &lt;td bgcolor="#0EABD6" style="padding: 12px 18px 12px 18px; border-radius:0px" align="center"&gt; 
                                        &lt;div id="cta2" class="mktEditable" style="" mktoname="cta2"&gt;
                                          &lt;p class="no-spacing"&gt;&lt;a href="{{my.Fulfillment-CTA-URL}}" target="_blank" style="font-size: 14px; font-weight: normal; color: #ffffff; text-decoration: none; display: inline-block;"&gt;Request a Meeting&lt;/a&gt;&lt;/p&gt;
                                        &lt;/div&gt; 
                                      &lt;/td&gt; 
                                    &lt;/tr&gt; 
                                  &lt;/tbody&gt; 
                                &lt;/table&gt; &lt;br /&gt;
                              &lt;/td&gt; 
                            &lt;/tr&gt; 
                          &lt;/tbody&gt; 
                        &lt;/table&gt; 
                      &lt;/td&gt; 
                    &lt;/tr&gt; 
  
                    &lt;tr class="mktoModule" id="social" mktoname="social" bgcolor="#2EA049"&gt; 
                      &lt;td class="two-column" style="font-size: 0; text-align: center;"&gt; 
                       
                        &lt;div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;"&gt; 
                          &lt;table width="100%"&gt; 
                            &lt;tbody&gt;
                              &lt;tr&gt; 
                                &lt;td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 20px 40px;"&gt; &lt;a href="http://go.eoriginal.com/JB3eB005bE0cHk00O000000" target="_blank" style="text-decoration:none; color:#ffffff"&gt;eOriginal.com&lt;/a&gt; &lt;/td&gt; 
                              &lt;/tr&gt; 
                            &lt;/tbody&gt;
                          &lt;/table&gt; 
                        &lt;/div&gt; 
                        
                        &lt;div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;"&gt; 
                          &lt;table width="100%"&gt; 
                            &lt;tbody&gt;
                              &lt;tr&gt; 
                                &lt;td class="inner" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"&gt; 
                                  &lt;table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%"&gt; 
                                    &lt;tbody&gt; 
                                      &lt;tr&gt; 
                                        &lt;td align="left" valign="middle" width="50"&gt;&lt;a href="https://twitter.com/eOriginal/" style="text-decoration:none;" target="_blank"&gt;&lt;img alt="Twitter" src="https://eoriginal.wise-portal.com/newsletter/public/social-twitter-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /&gt;&lt;/a&gt;&lt;/td&gt; 
                                        &lt;td align="left" valign="middle" width="50"&gt;&lt;a href="https://www.linkedin.com/company/57606" style="text-decoration:none;" target="_blank"&gt;&lt;img alt="LinkedIn" src="https://eoriginal.wise-portal.com/newsletter/public/social-linkedin-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /&gt;&lt;/a&gt;&lt;/td&gt; 
                                        &lt;td align="left" valign="middle" width="50"&gt;&lt;a href="http://www.facebook.com/pages/eOriginal/58932553996/" style="text-decoration:none;" target="_blank"&gt;&lt;img alt="Facebook" src="https://eoriginal.wise-portal.com/newsletter/public/social-facebook-icon.png" style="color: #FFFFFF; font-size: 12px;" width="40" height="40" /&gt;&lt;/a&gt;&lt;/td&gt; 
                                        &lt;td align="left" valign="middle" width="50"&gt;&lt;a href="https://www.eoriginal.com/eo-insights/" style="text-decoration:none;" target="_blank"&gt;&lt;img alt="Blog" src="https://eoriginal.wise-portal.com/newsletter/public/social-blog-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /&gt;&lt;/a&gt;&lt;/td&gt; 
                                      &lt;/tr&gt; 
                                    &lt;/tbody&gt; 
                                  &lt;/table&gt; &lt;/td&gt; 
                              &lt;/tr&gt; 
                            &lt;/tbody&gt;
                          &lt;/table&gt; 
                        &lt;/div&gt; 
                         &lt;/td&gt; 
                    &lt;/tr&gt; 
                    &lt;tr class="mktoModule" id="footer" mktoname="footer" bgcolor="#353937"&gt; 
                      &lt;td class="two-column" style="font-size: 0; text-align: center;"&gt; 
                       
                        &lt;div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;"&gt; 
                          &lt;table width="100%"&gt; 
                            &lt;tbody&gt;
                              &lt;tr&gt; 
                                &lt;td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"&gt; &lt;img src="http://info.eoriginal.com/rs/907-BBE-942/images/nl-footer-logo-v2.2.png" width="200" /&gt;&lt;br /&gt;&lt;br /&gt; &lt;span&gt;© 2018 eOriginal, Inc. All rights reserved.&lt;/span&gt; &lt;/td&gt; 
                              &lt;/tr&gt; 
                            &lt;/tbody&gt;
                          &lt;/table&gt; 
                        &lt;/div&gt; 
                        &lt;!--[if (gte mso 9)|(IE)]&gt;
                          &lt;/td&gt;&lt;td width="50%" valign="top"&gt;
                          &lt;![endif]--&gt; 
                        &lt;div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;"&gt; 
                          &lt;table width="100%"&gt; 
                            &lt;tbody&gt;
                              &lt;tr&gt; 
                                &lt;td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"&gt; The Warehouse at Camden Yards&lt;br /&gt; 351 W. Camden St., Suite 800&lt;br /&gt; Baltimore, MD 21201&lt;br /&gt;&lt;br /&gt; SALES &lt;span style="color: #2EA049"&gt;1-866-935-1776&lt;/span&gt;&lt;br /&gt;SUPPORT &lt;span style="color: #2EA049"&gt;1-866-364-3578&lt;/span&gt; &lt;/td&gt; 
                              &lt;/tr&gt; 
                            &lt;/tbody&gt;
                          &lt;/table&gt; 
                        &lt;/div&gt; 
                        &lt;/td&gt; 
                    &lt;/tr&gt; 
                  &lt;/tbody&gt; 
                &lt;/table&gt; 
              &lt;/center&gt; &lt;/td&gt; 
          &lt;/tr&gt; 
        &lt;/tbody&gt; 
      &lt;/table&gt;  
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Based on this code above what I get is like this:</p>
  
  <p><a href="https://i.stack.imgur.com/xqjq8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xqjq8.png" alt="enter image description here"></a></p>
  
  <p>So as you can see the topic and button will view above the picture. But what I'm trying to achieve is to make the topic/button and image to view beside each other like this:</p>
  
  <p><a href="https://i.stack.imgur.com/YcRle.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YcRle.png" alt="enter image description here"></a></p>
  
  <p>How can I achieve this? If possible I'd like a 60 to 40 ratio. 40 being the image.</p>