JSFiddle - React, Tailwind, and code Playground

by Hakan Bilgin

HTML

<!--
https://clearleft.com/posts/an-equal-height-grid-using-flexbox
-->
<ul class="list">  
   <li class="list-item">  
     <div class="list-content">    
      <h2>Title</h2>  
      <p>Lorem ipsum dolor...</p>  
    </div>  
  </li>  
  <li class="list-item">  
    <div class="list-content">  
      <h2>Title</h2>  
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elitamet, consectetur adipisicing elitamet, consectetur adipisicing elitamet, consectetur adipisicing elit...</p>  
    </div>  
  </li>  
  <li class="list-item">  
    <div class="list-content">  
      <h2>Title</h2>  
      <p>Lorem ipsum dolor sit amet</p>  
      <a href="">Link</a>  
    </div>  
  </li>  
</ul>

CSS

.list {
  display: flex;
  flex-wrap: wrap;
}
.list-item {
  width: 50%;
  display: flex; 
  padding: 0.5em;
  width: 40%;
  border: 1px solid red;
}
.list-content {
   display: flex;
   flex-direction: column;
   background-color: #fff;
   padding: 1em;
   width: 100%;
}
h2 {
  margin: 0px
}