JSFiddle - React, Tailwind, and code Playground

HTML

<div class="articles">
  <div class="article">COUCOU</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.</div>
  <div class="article">COUCOU</div>
  <div class="article">COUCOU</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.</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%;
}
@media screen and (max-width : 700px) {
  .article {min-width:40%}
}
@media screen and (max-width : 500px) {
  .article {min-width:90%}
}