How to print one aura component per page?

Question

I have an aura component which contains a series of different auras. These auras show on screen depending on some condition and that page has to be printed. However most times, one aura component doesn't take the entire page size and ends there, making the new component start in a very odd way. I'd much rather have it start in the next page.

I tried several steps to solve this problem noone of which worked (mostly css) like (i tried them all together but also one at a time)

@media print {
    .THIS {
        page-break-after: always; 
        page-break-before: always;  
        page-break-inside: always;
     }
 }

I also tried wrapping my single components in several divs and giving each div those properties but still no luck

Is there any working way to make it work?

i'll attach sketch of my current situation and what i wanna accomplish below

Current situation

My target

Answer 1

For future reference, in case someone ever needs to do the same

I managed to make it work by creating a VFP and including the components. Every component is positioned inside a div which has the CSS properties applied to it.

Not the best but it works