<div class="Cols Cols--balanced">
    <div class="Cols-half Cols-item">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit velit culpa, ex! Itaque asperiores eum animi aliquid! Illum dolores veritatis, quaerat dolore soluta itaque iste consectetur quidem doloremque quia quos velit unde pariatur ut, non repellat
        aliquam ab culpa rerum.
    </div>
    <div class="Cols-half Cols-item">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia consectetur fugiat laudantium quidem molestias, tenetur saepe maxime, culpa eaque minima tempore beatae earum modi sunt reiciendis ratione voluptatem repellat eveniet esse laboriosam harum
        a quod nam. Quae rem recusandae eius.
    </div>
</div>
<div class="Cols{% if colsModifier %} Cols{{ colsModifier }}{% endif %}">
    <div class="Cols-half Cols-item">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit velit culpa, ex! Itaque asperiores eum animi aliquid! Illum dolores veritatis, quaerat dolore soluta itaque iste consectetur quidem doloremque quia quos velit unde pariatur ut, non repellat aliquam ab culpa rerum.
    </div>
    <div class="Cols-half Cols-item">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia consectetur fugiat laudantium quidem molestias, tenetur saepe maxime, culpa eaque minima tempore beatae earum modi sunt reiciendis ratione voluptatem repellat eveniet esse laboriosam harum a quod nam. Quae rem recusandae eius.
    </div>
</div>
{
  "colsModifier": "--balanced"
}

The cols component ia used to create columned layouts. The modifier Cols--balanced centres the content vertically.