There is no good general solution. As some have pointed out, you can put a page break before <div> "B" ... but there you will always get it. Even when "A" and "B" all fit on one page.
You can use page-break-inside="avoid" on <div> "B". This is probably closer to what you want. If "B" does not fit on the page with "A", "B" will all be moved to the next page.
BUT ... that has a side effect because there is a third possibility. What if the content of "B" is so large that it itself does not fit on a page? WHat will happen is that it would do what you think, moving "B" to the next page and try to build that page with "B". It will not be able to meet the condition that "B" avoid a page break inside so it will break that condition. Unfortunately, it would not figure that out until the end of the page, so you will end up with a blank page.
If you know that "B" will always fit on one page, then you can use page-break-inside="avoid" and that would work. But if it does not, nothing will work for you.
A slightly more lengthy explanation for a similar question is here:
HTML/CSS: empty page + only header page when printing table
You might want to use some print stylesheet with
pt units for your elements, so you can adjust their physical size printed on paper.
I'd suggest you have a look at this Post:
How To Set Up A Print Style Sheet