JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="container">
  <div class="mappa row">
     <div class="col-4">
       <div class="bg-gray">
         lorem
       </div>
     </div>
     <div class="col-4">
       <div class="bg-gray">
         lorem
       </div>
     </div>
     <div class="col-4">
       <div class="bg-gray">
         lorem
       </div>
     </div>
     <div class="col-4">
       <div class="bg-gray">
         lorem
       </div>
     </div>
     
     <div class="col-12">
       <div class="row">
       
         <div class="col-4">
           <div class="bg-gray">
             lorem newline start
           </div>
         </div>
         <div class="col-4">
           <div class="bg-gray">
             lorem newline
           </div>
         </div>
         <div class="col-4">
           <div class="bg-gray">
             lorem newline
           </div>
         </div>
         
       </div>
     </div>
     
  </div>
</div>

CSS

.bg-gray{
  background-color: grey;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.new-line{
  &:before{
    display: inline-block;
    content: "";
    margin-top: -16px;
    flex-basis: 100%;
    height: 0;
  }
  .bg-gray{
    border: 10px solid darkgrey;
  }
}
.line-break{
  margin-top: -16px;
  width: 100%;
  background-color: red;
  height: 0;
}