Use .split to create block split into 2 evenly sized columns. On mobile widths they will be stacked vertically instead.
<div class="split">
<div class="split-item">
<h2>Column 1</h2>
{% lorem 1 p %}
</div>
<div class="split-item">
<h2>Column 2</h2>
{% lorem 1 p %}
</div>
<div class="split-item">
<h2>Column 3</h2>
{% lorem 1 p %}
</div>
<div class="split-item">
<h2>Column 4</h2>
{% lorem 1 p %}
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Use .split-item.main .split-item.sidebar to create a main column with a fixed-width sidebar column.
<div class="split">
<div class="split-item main">
<h2>Column 1</h2>
{% lorem 3 p %}
</div>
<div class="split-item sidebar">
<h2>Column 2</h2>
{% lorem 3 p %}
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
Similique facere ratione qui natus cumque aspernatur provident, enim maiores laborum nam doloremque minus saepe, voluptatum consequatur sit quidem at fuga nulla asperiores praesentium vel facere? Dolorem quos libero temporibus omnis possimus cupiditate esse repudiandae sapiente, voluptatibus neque non, eius at rerum perspiciatis delectus odit.
Consequuntur sequi adipisci doloremque consectetur facere. Itaque quasi reiciendis, odit iure laboriosam ea asperiores quibusdam blanditiis, at natus mollitia officiis eveniet. Voluptate quisquam maiores ratione earum labore reiciendis minima, impedit ratione esse, corrupti praesentium a iste adipisci doloremque ad voluptate qui culpa? Soluta ex est dignissimos expedita quasi ipsam, vitae quia nihil aliquid minus nisi obcaecati debitis, at itaque nesciunt eum voluptatibus officia sapiente nisi nam quisquam, omnis laboriosam doloribus itaque voluptate aperiam quia veritatis exercitationem culpa.
Divide horizontal space into an left-aligned and right-aligned inline element
<span class="divide">
<span>One</span>
<span>Two</span>
</span>