JSFiddle - React, Tailwind, and code Playground

HTML

<body>
        
        <!-- first row  -->
        <secction class="rowOne">

            <div class="col ">
                <div class="block hours">
                    8h00
                </div>  
            </div>      

        <div class="col ">
            <div class="block hours noss">
                8h00
            </div>  
        </div>

        <div class="col ">
            <div class="block hours noss">
                8h00
            </div>  
        </div>

        <div class="col ">
            <div class="block hours noss">
                8h00
            </div>  
        </div>

        </secction> 

        <!-- end of first row -->
            

        

        <!-- segend row  -->

        <section class="rowTwoo">

        <div class="col ">
            <div class="block hours">
                8h00
            </div>  
        </div>

        <div class="col pers">
            <div class="block hours noss">
                8h00
            </div>  
        </div>

        <div class="col pers">
            <div class="block hours noss">
                8h00
            </div>  
        </div>

        <div class="col pers">
            <div class="block hours noss">
                8h00
            </div>  
        </div>

        </section>
        
        <!-- end of segend row  -->
        
        


      
    </body>

CSS

.clearfix:before,.clearfix:after{content:".";display:block;height:0;overflow:hidden}.clearfix:after{clear:both}.clearfix{zoom:1}.block{border-style:solid;border-color:#000;border-width:1px;vertical-align:center}.col{float:left;width:150px}.hours{height:60px;text-align:center;vertical-align:top;font-weight:700}.rowTwoo{width:100%;height:auto;overflow:auto}.rowOne .noss{height:30px}.rowTwoo .pers{position:relative;bottom:30px;z-index:9}