CSS-columns - works ok until subheadings are on different columns

Trying to find the best way to make columns with CSS.

by ian_smithz

HTML

<div class="columns">
    <section>
        <h2>First heading</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, qui, cumque? Maxime ad harum earum tempore, mollitia autem fugiat exercitationem fuga porro, ipsum commodi iusto dolorum perspiciatis reiciendis dolore est.</p>
    </section>
    <section>
        <h2>Second heading</h2>
        <p>Illum accusamus quibusdam quos quasi est atque officia suscipit. Veniam incidunt quia impedit, sint iste laborum vero magni blanditiis doloremque ullam error sequi id perferendis quam quo cum eaque et.</p>
    </section>
    <section>
        <h2>Third heading</h2>
        <p>Sapiente possimus, architecto pariatur eaque ab, sed, minus corrupti labore neque id fuga reprehenderit? Laborum tempora pariatur dolore repellat dolorum, omnis id placeat reprehenderit debitis soluta doloremque. Commodi, dolore minima.</p>
    </section>
    <section>
        <h2>Fourth heading</h2>
        <p>Voluptatem a quia, quaerat magnam sunt, laudantium ad et. Optio sequi facere corporis eaque numquam, officia id ipsam, aspernatur voluptas nesciunt, magni natus veritatis laboriosam eius ex dolorum, voluptatem dignissimos.</p>
    </section>
        <p>Voluptas porro illum delectus accusamus, quo beatae neque reprehenderit doloremque illo laborum dolorem quae, ea sed voluptates fuga architecto, natus iusto alias quam voluptate soluta, reiciendis facilis quos. Odio, sapiente.</p>
  
</div>

CSS

body {
    font-size: 14px;
}
.columns {
    -webkit-columns: 100px 3; /* Chrome, Safari, Opera */
    -moz-columns: 100px 3; /* Firefox */
    columns: 100px 3;
}
.columns h2 {
    margin-bottom: 0;
}
.columns h2:first-child {
    margin-top: 0;
}
.columns p {
    margin-top: 0;
}
section {
    /*display:inline-block;*/
}