<div class="card">
  <h2>Bell bok broccoli bush cabbage</h2>
  <p>The heading in this card is not balanced. We might end up with a single word on the last line.</p>
</div>

<div class="card balanced">
  <h2>Bell bok broccoli bush cabbage</h2>
  <p>The heading in this card is balanced. This means we avoid having a single word on the last line.</p>
</div>

.card {
  background-color: #002856;
  color: #fff;
  padding: 10px;
  margin: 0 0 2em 0;
  inline-size: 300px;
}

.balanced h2 {
  text-wrap: balance;
}

body {
  font: 1.2em Roboto, sns-serif;
  padding: 2em;
}