Css grid/flex in pdf

Question

I use barryvdh/laravel-snappy to generate pdf and need to create a signature area in my pdf doc. There must be two signature fields because it's a contract pdf but when I use css grid or flex they place one under the other. How to place them side by side?

 <div class="flex-container" style="  display:flex;                    
                    padding: 10px;">
            <div class="flex-item" style="padding: 20px; text-align: center;">
                <h2 style="text-decoration:underline">sign1</h2>                
            </div>
            <div class="flex-item"  style="padding: 20px; text-align: center;">
                <h2 style="text-decoration:underline">sign2</h2>
            </div>                    
    </div>    

Answer 1

<div class="flex-container" style=" margin: auto; display:table;                    
                    padding: 10px;border:1px solid red">
            <div class="flex-item" style="padding: 20px; text-align: center;background-color: blue; display: table-cell">
                <h2 style="text-decoration:underline">sign1</h2>                
            </div>
            <div class="flex-item"  style=" margin: auto; padding: 20px; text-align: center;background-color: green; display:table-cell">
                <h2 style="text-decoration:underline">sign2</h2>
            </div>                    
    </div> 

True, I tried to convert HTML with flex to PDF. The two containers go on two lines. My advice is to use 'display:table' to '.flex-container' and 'display: table-cell' to '.flex-item. That worked out for me.