<div class="container">
  <div class="element">
    <p>
      They were four men living all together yet they were all alone. Their house is a museum where people come to see 'em. They really are a scream the Addams Family. 
    </p>
    <pre>
@media print {
    img {
        display: block;
    }
    img, table, ul, ol, .code-snippet {
        break-inside: avoid;
    }
}
                </pre>
    <p>
      They were four men living all together yet they were all alone. Their house is a museum where people come to see 'em. They really are a scream the Addams Family. Now were up in the big leagues getting' our turn at bat. Goodbye gray sky hello blue. There's nothing can hold me when I hold you. Feels so right it cant be wrong. Rockin' and rollin' all week long. One two three four five six seven eight Sclemeel schlemazel hasenfeffer incorporated. Boy the way Glen Miller played. Songs that made the hit parade. Guys like us we had it made. Those were the days. And you know where you were then. 
    </p>
  </div>
  <hr>
  <div class="element break-inside">
    <p>
      They were four men living all together yet they were all alone. Their house is a museum where people come to see 'em. They really are a scream the Addams Family. 
    </p>
    <pre>
@media print {
    img {
        display: block;
    }
    img, table, ul, ol, .code-snippet {
        break-inside: avoid;
    }
}
                </pre>
    <p>
      They were four men living all together yet they were all alone. Their house is a museum where people come to see 'em. They really are a scream the Addams Family. Now were up in the big leagues getting' our turn at bat. Goodbye gray sky hello blue. There's nothing can hold me when I hold you. Feels so right it cant be wrong. Rockin' and rollin' all week long. One two three four five six seven eight Sclemeel schlemazel hasenfeffer incorporated. Boy the way Glen Miller played. Songs that made the hit parade. Guys like us we had it made. Those were the days. And you know where you were then. 
    </p>
  </div>
</div>
body {
  background-color: #eee;
  color: #555;
  font-size: 1.1em;
  font-family: 'Lato', Calibri, sans-serif;
}

hr {
  margin: 50px 0;
}

.container {
  margin: 40px auto;
  width: 90%;
}

pre {
  background-color: #222;
  color: white;
  font-family: Calibri;
  padding: 1em;
  border-radius: 5px;
  white-space: pre-wrap;
}

.element {
  padding: 20px;
  background-color: white;
  -moz-columns: 12em 3;
  -webkit-columns: 12em 3;
  columns: 12em 3;
  -webkit-column-gap: 3em;
  -moz-column-gap: 3em;
  column-gap: 3em;
  text-align: justify;
}

.break-inside pre {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid-column;
}