I have some paragraphs with headings, divided into four columns. I need the headings to never break before their following paragraph, while still flowing nicely through the columns.

[JSFiddle](http://jsfiddle.net/hz44apa3/)

HTML
----

```
<div class="columns">    
    <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>
    <h2>Second heading</h2>
    <p>Lorem […]</p>
    [etc]
</div>

```

CSS
---

```
body {
    font-size: 14px;
}
.columns {
    -webkit-columns: 4 5em;
    -moz-columns: 4 5em;
}
.columns h2 {
    margin-bottom: 0;
}
.columns h2:first-child {
    margin-top: 0;
}
.columns p {
    margin-top: 0;
}

```