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="row g-2">
     <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-4 new-line">
       <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>

SCSS

.bg-gray{
  background-color: grey;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.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;
}