title: HTML/CSS Splitting container into 3 parts
body: <p>I want to split container into three sections and it's already done but I can't figure out how to align all these sections vertically.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table width="100%"&gt;
  &lt;tbody&gt;
      &lt;tr&gt;
          &lt;td class="description"&gt;
              &lt;div&gt;
                  &lt;section class="col"&gt;
                      &lt;h4&gt;Description1&lt;/h4&gt;
                      &lt;div&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&lt;/div&gt;
                  &lt;/section&gt;
                  &lt;section class="col"&gt;
                      &lt;h4&gt;Description2&lt;/h4&gt;
                      &lt;div&gt;blablalblablablalbla&lt;/div&gt;
                  &lt;/section&gt;
                  &lt;section class="col"&gt;
                      &lt;h4&gt;Description3&lt;/h4&gt;
                      &lt;div&gt;bl
                  &lt;/section&gt;
              &lt;/div&gt;
          &lt;/td&gt;
       &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>.description {
      background: lightgrey;
  }
  
  .description .col {
      display: inline-block;
      width: 30%;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/kg4xao6m/" rel="nofollow noreferrer">https://jsfiddle.net/kg4xao6m/</a></p>