html - 最小化左列的宽度以专注于一行的右列 HTML / in-line CSS / Markdown

Question

希望分配大部分行空间以与容器对齐到行的右列。我用过 Column1 Column2

这似乎解决了一些在线 HTML 编辑器的问题，但由于某种原因，它对我正在使用的主要关注 MarkDown / HTML / In-Line CSS 的内部编辑器没有影响

有没有一种方法可以最好使用内联 CSS 来完成？

<div class="main-container" style="display: flex;">
   <div class="image-container">
      <img
         src="https://lh3.googleusercontent.com/coMv1dl31PCfEs6essJoEUwVryaqKHKQvENdZ_WYpN-PXa8Qfitkg3grQxIVN22W5A"
         hspace="50" width="150" height="150">
   </div>
   <div class="content-container" style="width: 600px;">
      <h3>Subject Title</h3>
      <h4>Subject Description</h4>
      <table>
         <tr>
            <td>
               <p>
               <center><span style="font-weight:bold">Sample Service</span></center>
               </p>
            </td>
            <td>Sample Service Details Will be listed here!!!!!!!!!!!</td>
         </tr>
         <tr>
            <td>
               <p>
               <center><span style="font-weight:bold">Contact Us</span></center>
               </p>
            </td>
            <td style="padding-left: 20px;">
               <ul style="padding-left: 15px; margin: 0;">
                  <li style="padding-bottom: 10px;">
                     <a href="mailto:[e-mail]​">Email Sample</a>
                  </li>
                  <li><a>Skype: Sample Contact</a></li>
               </ul>
            </td>
         </tr>
      </table>
   </div>
</div>

标签： htmlcsshtml-tableflexboxmarkdown