The browser evens out the line lengths, so you don’t need <br>. Keep the same <span> around groups of words you want to stay together. balance evens out the lines using only the breaks between them.

h2 {
  text-wrap: balance;
}

.nowrap {
  white-space: nowrap;
}

<h2>
  <span class="nowrap">With new features,</span>
  <span class="nowrap">replace the</span>
  <span class="nowrap">old technique</span>
</h2>

To keep the last line from ending up short, a <br> was put into the heading and hidden on narrow screens. Groups of words were sometimes wrapped in a <span> with white-space: nowrap so they wouldn’t break apart. Every time the wording or the viewport width changed, the break position had to be decided again.

.nowrap {
  white-space: nowrap;
}

@media (max-width: 767px) {
  .hidden-md {
    display: none;
  }
}

<h2>
  <span class="nowrap">With new features,</span><br class="hidden-md" />
  <span class="nowrap">replace the</span>
  <span class="nowrap">old technique</span>
</h2>