HTML/CSS Разделение контейнера на 3 части

Question

Я хочу разделить контейнер на три секции, и это уже сделано, но я не могу понять, как выровнять все эти секции по вертикали.

HTML:

<table width="100%">
<tbody>
    <tr>
        <td class="description">
            <div>
                <section class="col">
                    <h4>Description1</h4>
                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                </section>
                <section class="col">
                    <h4>Description2</h4>
                    <div>blablalblablablalbla</div>
                </section>
                <section class="col">
                    <h4>Description3</h4>
                    <div>bl
                </section>
            </div>
        </td>
     </tr>
</tbody>

CSS:

.description {
    background: lightgrey;
}

.description .col {
    display: inline-block;
    width: 30%;
}

https://jsfiddle.net/kg4xao6m/

Answer 1

Использование vertical-align: top в вашем CSS для элементов inline-block.

.description .col {
    display: inline-block;
    width: 30%;
    vertical-align: top;
}

JSFiddle

Answer 2

Я согласен с ответом @David, который заключается в выравнивании разделов по вертикали, но вы также используете таблицу, в которой явно <tr> с тремя <td> а не один из каждого.

Семантически это более уместно:

table {
    background: lightgrey;
}

td {
    width: 30%;
    vertical-align: top;
}

<table width="100%">
  <tbody>
    <tr>
      <td>
        <h4>Description1</h4>
      </td>
      <td>
        <h4>Description2</h4>
      </td>
      <td>
        <h4>Description3</h4>
      </td>
    </tr>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
      <td>blablalblablablalbla</td>
      <td>bl</td>
    </tr>
  </tbody>
</table>