How to prevent a div from breaking in two using a cross-browser CSS column property?

Question

Here is my HTML:

<section style="-webkit-column-count:3">
  <div class="item">
    <h2></h2>
    <p>…</p>
    <p> Read More &mdash; <a  href="link.htm"></a></p>
    <hr>
  </div>
  <div class="item">
  ..
  </div>
  .
  .
  .
</section>

At the bottom of the page, the div with the product class is split into two to maintain equal column heights. How can I hold a separate div together below? Let me know. If I do not clearly explain the question.

Here is jsFiddle: http://jsfiddle.net/j35toyju/

You will see that the elements are not in a complete block. Sometimes the title is at the bottom and the rest of the div is at the top. In other cases, everything is at the bottom, and the link is at the top.

This question provides an answer, but it only works on Google Chrome. Is there a way to make it work in all browsers. Using JavaScript if this is not possible in pure CSS?