Issue Looping through a series of cards in a PDF generated by DOMDF in Laravel

Am working on an application build using Laravel. I have generated a PDF using DOMPDF and displaying a series of cards. The 1st card is static while the subsequent card / 2nd card is dynamic (am using a Loop to display it multiple times depending on dynamic data from the backend).

It works fine except in styling, the dynamic Cards are overflowing out of the PDF document on the right side. I want to make them appear in a table format (2 per row) cause I have 6 cards in total (inclusive of the static card)...

CSS code

.row1{
    display: table;
}

.registerph1{
    float: left;
    clear: left;
    position: absolute;
    margin-left: 2px;
    top: 63px;
}

.registerph4{
    float: left;
    clear: left;
    top: 180px;
    position: absolute;
    z-index: 5;
    margin-top: -4px;
    margin-left: 2px;
}

.phonecard6 {
    position: relative;
    background: #ba0c2f;
    width: 290px;
    height: 200px;
    margin-right: 10px;
    padding: 20px;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius: 15px;
    overflow: hidden; 
    float: left;
}

.btm-right1{
    position: absolute;
    background: #000;
    z-index: -3;
    width: 690px;
    height: 710px;
    left: -260px;
    top: -330px;
    border-radius: 0 0 700px 0;
    transform: rotate(21deg);
} 

Markup code

 <!-- Row 1-->
    <div class="row1">

    <!-- Card 1-->
    <!-- Static card-->
    <div class="phonecard6">
        <div class="innerDiv6">
            <div>
                <img src="assets/images/logo.svg" alt="logo" class="cardLogo3" height="50" width="70">
                <img class="QR6" src="assets/images/qr.png" height="43" width="43">
            </div>

            <div class="registerph1">
                <label class="fm-input6"> Full Names </label> 
                <span class="fm-input6"> :  jhhjhsdjsdhsd </span>
            </div>  <br>

            <!-- Member No-->
            <div class="row registerph4">
                    <label class="fm-input6"> Effective Date</label> 
                    <span class="fm-input6"> :  ........... </span> <br>
                    <label class="fm-input6"> Expiry Date</label> 
                    <span class="fm-input6"> :   ........  </span>
                </div>
            <!-- END-->

        </div>
        <div class="btm-right1">
        </div>
    </div>
    <!-- End Card 1-->

     <!-- Card 2-->
     <!-- Displaying them dynamically-->
     @foreach($dpd as $d)
     <div class="phonecard6">
        <div class="innerDiv6">
            <div>
                <img src="assets/images/logo.svg" alt="logo" class="cardLogo3" height="50" width="70">
                <img class="QR6" src="assets/images/qr.png" height="43" width="43">
            </div>

            <div class="registerph1">
                <label class="fm-input6"> Full Names </label> 
                <span class="fm-input6"> :  jhhjhsdjsdhsd </span>
            </div>  <br>

            <!-- Member No-->
            <div class="row registerph4">
                    <label class="fm-input6"> Effective Date</label> 
                    <span class="fm-input6"> :  ........ </span> <br>
                    <label class="fm-input6"> Expiry Date</label> 
                    <span class="fm-input6"> :   .......... </span>
                </div>
            <!-- END-->
        </div>
        <div class="btm-right1">
        </div>
    </div>
    @endforeach
    <!-- End dependents-->
    </div>
    <!-- END Card 2-->

Link to the image generated: https://imgur.com/qQLIpKu