<h2>Without page-break-inside</h2>
<div class="columns">
  <div>Item 1</div>
  <div>Item 2, which is slightly longer</div>
  <div>Item 3, which is also longer and jumps to next column</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</div>

<h2>With page-break-inside</h2>
<div class="columns with-page-break-rule">
  <div>Item 1</div>
  <div>Item 2, which is slightly longer</div>
  <div>Item 3, which is also longer and jumps to next column</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</div>
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.columns {
  columns: 2;
  width: 400px;
  background: #fafafa;
  padding: 10px;
  margin-bottom: 15px;
}
.columns > * {
  background: white;
  border: 1px solid #f3f3f3;
  padding: 5px;
}

.columns.with-page-break-rule > * {
  page-break-inside: avoid;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.