I'm writing a PDF-like page format in HTML. How can I move text to the next page when the page height is exceeded

The data

I have JSON data that I wan't to use in a PDF-report. The PDF-report is created from HTML.

[
    {
        "title": "Chapter 1",
        "text": "Some large text"
    },
    {
        "title": "Chapter 2",
        "text": "Some large text"
    }
]

Format of the report page

All pages has the following format.

What I need

I need to add the text within the content of the page. But when the text is exceeding it has to jump to the next page and keeps the same format. Does anyone have an idea how to accomplish this?

from I'm writing a PDF-like page format in HTML. How can I move text to the next page when the page height is exceeded