Coder Wrap provides free to use snippets

* {
 box-sizing: border-box;
}

body {
 margin: 0px;
}

.listbox {
 max-width: 1200px;
 margin: auto;
 width: 100%;
 font-family: system-ui;
 display: flex;
 flex-flow: row wrap;
}

.listbox .item {
 width: calc(33.33% - 20px);
 margin: 10px;
 border: #e1e1e1 1px solid;
 padding: 20px;
 box-shadow: #dbdbdb 0px 0px 8px;
}

.listbox .item h4 {
 margin: 0px 0px 8px 0px;
 font-size: 20px;
}

.listbox .item p {
 margin: 0px;
}

.item .readmore-btn {
 border: #ccc 1px solid;
 padding: 5px 10px;
 line-height: normal;
 text-decoration: none;
 margin-top: 15px;
 font-weight: 700;
 font-size: 14px;
 border-radius: 4px;
 display: inline-block;
 color: #000;
 cursor: pointer;
}

@media(max-width:992px) {
 .listbox .item {
  width: calc(50% - 10px);
  margin: 5px;
  padding: 10px;
  font-size: 14px;
 }

 .listbox .item h4 {
  font-size: 15px;
 }

}

document.addEventListener('DomContentLoaded', () => {
 function equalHeight(container) {
   var currentTallest = 0;
   var currentRowStart = 0;
   var rowDivs = [];
   var elements = document.querySelectorAll(container);

   elements.forEach(function(element) {
     var el = element;
     el.style.height = 'auto';
     var topPosition = el.offsetTop;

     if (currentRowStart !== topPosition) {
       rowDivs.forEach(function(rowDiv) {
         rowDiv.style.height = currentTallest + 'px';
       });
       rowDivs = [];
       currentRowStart = topPosition;
       currentTallest = el.offsetHeight;
       rowDivs.push(el);
     } else {
       rowDivs.push(el);
       currentTallest = (currentTallest < el.offsetHeight) ? el.offsetHeight : currentTallest;
     }

     rowDivs.forEach(function(rowDiv) {
       rowDiv.style.height = currentTallest + 'px';
     });
   });
 }
 equalHeight('.listbox .item');
 equalHeight('.listbox .item h4');
 equalHeight('.listbox .item p');
})