JSFiddle - React, Tailwind, and code Playground

HTML

<div class="cards">
  <div class="card">
    <div class="img"></div>
    <h2>lorem ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo placeat earum, recusandae maiores unde et.</p>
  </div>

  <div class="card">
    <div class="img"></div>
    <h2>lorem ipsum dolor sit amet consectur amet adipiscing</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo placeat earum, recusandae maiores unde et.</p>
  </div>
  
  <div class="card">
    <div class="img"></div>
    <h2>lorem ipsum dolor sit amet consectur consectetur adipisicing elit. Explicabo</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo placeat earum, recusandae maiores unde et.</p>
  </div>
</div>

CSS

.cards{
  display: flex;
}

.card{
  width: 100%;
  max-width: 12rem;
  border: 2px solid #ccc;
  border-radius: 1em;
  padding: 1rem;
  margin: .5rem;
}

.card .img{
  width: 100%;
  height: 5rem;
  border-radius: .75rem;
  background: #ccc;
}

.card h2{
  overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
}