Avoid break on header and first few sentences of text using css - html

Question

I have a header and a block of text under it. I want the header and the first three sentences to avoid a page break, using the css property page-break-inner: avoid. Then I want the rest of the sentences to continue as usual.
I've written the following code but the sentences after the first 3 are starting on a new line, because I've set the span containing the header and the first three sentences as display: inline-block. I would set that span as display: inline but I read somewhere that page-break-inside won't work on inline elements.
.avoid-break {
page-break-inside: avoid;
}
span.avoid-break {
display: inline-block;
}
<span class="avoid-break">
<div>Subtite</div>
<span>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.
</span>
</span>
<span>
This should continue on the line above! It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</span>

Answer 1

A css solution:
remove span.avaoid-break
This is very specific to the code displayed, I would not use this in a production environment.
var spans = document.getElementsByTagName('span');
spans[1].innerHTML += spans[2].innerHTML
spans[2].remove()
IDs will make this much more usable:
<span class="avoid-break">
<div>Subtite</div>
<span id="text-box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.
</span>
</span>
<span id="extra-text">
This should continue on the line above! It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</span>
Javascript:
var textbox = document.getElementById('text-box');
var extratext = document.getElementById('extra-text');
textbox.innerHTML += extratext.innerHTML;
extratext.remove()