<div class='container'>
  <h1>My Document</h1>
  <div class='section'>
    <h2>Section 1</h2>
    <p>This is the first section of the document. It contains some important information.</p>
  </div>
  <div class='section no-break'>
    <h2>Section 2</h2>
    <p>This section should not be broken across pages when printed.</p>
    <p>It contains more content that should stay together.</p>
  </div>
  <div class='section'>
    <h2>Section 3</h2>
    <p>This is the third section of the document.</p>
  </div>
</div>

.container {
  width: 600px;
  margin: 0 auto;
}

.section {
  border: 1px solid #ccc;
  padding: 20px;
  margin: 10px 0;
}

.no-break {
  page-break-inside: avoid;
}

@media print {
  .container {
    width: 100%;
  }
}

// No JavaScript required for this demo

My Document

Section 1

This is the first section of the document. It contains some important information.

Section 2

This section should not be broken across pages when printed.

It contains more content that should stay together.

Section 3

This is the third section of the document.