JSFiddle - React, Tailwind, and code Playground

by Corentin Ballot

HTML

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<h1>Cas 1</h1>
<div class="container">
      <div class="box">
        <h6>Title 1</h6>
        <div class="wrapper"></div>
        <p>A small description</p>
      </div>
  
      
      <div class="box">
        <h6>Title 2</h6>
        <div class="wrapper"></div>
        <p>A small description</p>
      </div>
    
      <div class="box">
        <h6>Title 3</h6>
        <div class="wrapper"></div>
        <p>A bigger description goes here to make it take two lines</p>
      </div>
</div>

<h1>Cas 2</h1>
<div class="container">
      <div class="box">
        <h6>A Title</h6>
        <div class="wrapper"></div>
        <p>A small description</p>
      </div>
  
      
      <div class="box">
        <h6>Title 2</h6>
        <div class="wrapper"></div>
        <p>A bigger description goes here to make it take two lines</p>
      </div>
    
      <div class="box">
        <h6>Title 3</h6>
        <div class="wrapper"></div>
        <p>A very large description taking 3 lines is placed here to make whatever changes we need.</p>
      </div>
    
      <div class="box">
        <h6>A Title is placed here to make whatever changes we need.</h6>
        <div class="wrapper"></div>
        <p>A very large description taking 3 lines is placed here to make whatever changes we need.</p>
      </div>
</div>

CSS

.container {
  margin-top: 15px;
  display: flex;
}
.box {
  background-color: grey;
  margin: 15px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.box::after {
  content:"";
  /*flex-grow: 1;*/
}
.box h6 {
  flex-grow: 1;
  max-height: 3rem;
}
.box p {
  
  flex-grow: 0;
}