CSS column breaks?

The CSS column break rules are poorly supported, but I’ve found a workaround that does something close enough. Instead of writing this:

 <div class="columns">
    <h1>Heading</h1>
    <p>Paragraph</p>
 </div>

I’m writing this:

 <div class="columns">
    <div class="keeptogether">
       <h1>Heading</h1>
       <p>Paragraph</p>
    </div>
 </div>

Then the CSS looks like this:

 div.columns {
    column-width: 300px;
    -moz-column-width: 300px;
    -webkit-column-width: 300px;
 }
 div.keeptogether {
    display: inline-block;
    width: 100%;
 }

You can see the results here, for example.