JSFiddle - React, Tailwind, and code Playground

HTML

<div class="articles">
  <div class="article">COUCOU <p>
  hello the world
  </p></div>
  <div class="article">Cyclone serpent rhizopode mouchard, patapouf coloquinte zoulou aérolithe. Athlète complet zoulou judas pyrophore, olibrius scolopendre moujik gangster apache. Tête de lard enragé bandit. Écornifleur tortionnaire protozoaire, coupe-jarret patagon, pantoufle gargarisme gyroscope cyclotron lépidoptère polygraphe. Aérolithe végétarien arlequin, zouave parasite escogriffe. Phylactère trafiquant de chair humaine cyclotron voleur. Gibier de potence emplâtre faux-jeton, scolopendre mufle porc-épic mal embouché. Wisigoth tête de lard mufle, tchouk-tchouk-nougat patapouf anacoluthe garde-côte à la mie de pain.
  <p>
  hello the world
  </p></div>
  <div class="article">COUCOU<p>
  hello the world
  </p></div>
  <div class="article">COUCOU<p>
  hello the world
  </p></div>
  <div class="article">Cyclone serpent rhizopode mouchard, patapouf coloquinte zoulou aérolithe. Athlète complet zoulou judas pyrophore, olibrius scolopendre moujik gangster apache. Tête de lard enragé bandit. Écornifleur tortionnaire protozoaire, coupe-jarret patagon, pantoufle gargarisme gyroscope cyclotron lépidoptère polygraphe. Aérolithe végétarien arlequin, zouave parasite escogriffe. Phylactère trafiquant de chair humaine cyclotron voleur. Gibier de potence emplâtre faux-jeton, scolopendre mufle porc-épic mal embouché. Wisigoth tête de lard mufle, tchouk-tchouk-nougat patapouf anacoluthe garde-côte à la mie de pain.<p>
  hello the world
  </p></div>
  <div class="article">COUCOU</div>
</div>

CSS

.articles {
  display: flex;
  flex-wrap:wrap;
  gap: 10px;
}

.article {
  border: 1px solid red;
  flex: 1;
  min-width:30%;
  display:flex;
  flex-direction:column
}
p{margin-top:auto;}
@media screen and (max-width : 700px) {
  .article {min-width:40%}
}
@media screen and (max-width : 500px) {
  .article {min-width:90%}
}