JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<figure class="overview">
<ol>
  <li>
    <p><b>Thema 1</b></p>
    <ul>
      <li>Punkt 1-1</li>
      <li>Punkt 1-2</li>
      <li>Punkt 1-3</li>
      <li>Punkt 1-4</li>
      <li>Punkt 1-5</li>
    </ul>
  </li>
  <li>
    <p><b>Thema 2</b></p>
    <ul>
      <li>Punkt 2-1<br>
      <li>Punkt 2-2<br>
    </ul>
  </li>
  <li>
    <p><b>Thema 3</b></p>
    <ul>
      <li>Punkt 3-1</li>
      <li>Punkt 3-2</li>
      <li>Punkt 3-3</li>
      <li>Punkt 3-4</li>
      <li>Punkt 3-5</li>
      <li>Punkt 3-6</li>
      <li>Punkt 3-7</li>
      <li>Punkt 3-8</li>
      <li>Punkt 3-9</li>
      <li>Punkt 3-10</li>
      <li>Punkt 3-11</li>
      <li>Punkt 3-12</li>
      <li>Punkt 3-13</li>
      <li>Punkt 3-14</li>
      <li>Punkt 3-15</li>
    </ul>
  </li>
  <li class="keep">
  <p><b>Thema 4</b></p>
      <ul>
      <li>Punkt 4-1</li>
      <li>Punkt 4-2</li>
    </ul>
  </li>
  <li class="keep">
  <p><b>Thema 5</b></p>
    <ul>
      <li>Punkt 5-1</li>
      <li>Punkt 5-2</li>
      <li>Punkt 5-3</li>
    </ul>
  </li>
</ol>
</figure>

<figure class="overview">
<ol>
  <li>
    <p><b>Thema 1</b><br>
      Punkt 1-1<br>
      Punkt 1-2<br>
      Punkt 1-3<br>
      Punkt 1-4<br>
      Punkt 1-5<br>
    </p>
  </li>
  <li>
    <p><b>Thema 2</b><br>
      Punkt 2-1<br>
      Punkt 2-2<br>
    </p>
  </li>
  <li>
    <p><b>Thema 3</b><br>
      Punkt 3-1<br>
      Punkt 3-2<br>
      Punkt 3-3<br>
      Punkt 3-4<br>
      Punkt 3-5<br>
      Punkt 3-6<br>
      Punkt 3-7<br>
      Punkt 3-8<br>
      Punkt 3-9<br>
      Punkt 3-10<br>
      Punkt 3-11<br>
      Punkt 3-12<br>
      Punkt 3-13<br>
      Punkt 3-14<br>
      Punkt 3-15<br>
    </p>
  </li>
  <li>
    <p><b>Thema 4</b><br>
      Punkt 4-1<br>
      Punkt 4-2<br>
    </p>
  </li>
  <li>
    <p><b>Thema 5</b><br>
      Punkt 5-1<br>
      Punkt 5-2<br>
      Punkt 5-3<br>
    </p>
  </li>
</ol>
</figure>

CSS

.overview {
  column-width: 18em;
  border: 1px solid green;
  padding: 2px;
}

.overview ol {
  margin: 0;
  padding-left: 1.5em;
  border: 1px solid blue;
}

.overview > ol > li {
  margin-bottom: 0.5em;
  border: 1px solid red;
}

.overview .keep {
  break-inside: avoid;
}
.overview > ol > li::marker {
  font-weight: bold;
}

.overview > ol > li > p {
  margin: 0; 
  padding: 0;
  break-after: avoid-column;
  widows:2;
  orphans:3;
}
.overview > ol > li > ul {
  break-before: avoid-column;
}
.overview > ol > li > ul > li {
  break-before: avoid-column;
}
.overview > ol > li > ul > li+li {
  break-before: avoid-column;
}