Two side by side div's behaving as a single block - css

Question

Div's
<div class="row">
<div class="column">
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ol>
</div>
<div class="column">
<ol>
<li>FirstB</li>
<li>SecondB</li>
<li>ThirdB</li>
<li>FourthB</li>
</ol>
</div>
</div>
Css
.row {
display: flex;
flex-wrap: nowrap;
}
.column {
flex: 50%;
}
The example displays two div's side by side correctly.
************ **********
First FirstB
Second SecondB
Third ThirdB
Fourth FourthB
*********** **********
Problem to solve:
If the div's are rendered before a page break, and the available space is equivalent to two lines of the list (First and Second) these two lines are displayed before the page break and the others and the second div after the page break.
************
First
Second
page break
________________________
Third *************
Fourth FirstB
*********** SecondB
ThirdB
FourthB
***********
My goal is to make the two div's behave as a single block. ie if before the page break there is not enough space available for both div's (lists) they must pass together, as a single block, to after the page break.
The problem is quite evident if converting html to multipage pdf.
EDITED
Laravel blade file to pdf with DomPDF

Answer 1

Apparently as of 2020 DomPDF does not support flexbox. It seems DomPDF has long refused to support float or table CSS styling. Hence it may be impossible to make two side-by-side divs with the technology you are using.
As I noted in my comment, you may want to experiment with adding some CSS like this:
.row {
page-break-after: always;
}
Or perhaps a page break both before and after the row
For the future, you should include the technology you are asking about in your question. You should tag it, if possible. The tag css is far too vague for a question about a very specific PHP package.