<div class="conteneur">
  <div class="row">
    <div id="it1">
      <img src="https://www.ibisc.univ-evry.fr/~dupont/41.jpg" alt="">

      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis voluptates inventore eligendi fuga enim doloremque ab laborum, laudantium quisquam perferendis ullam sed quos adipisci fugit similique repellat nihil vero doloribus?</p>
    </div>
    <div id="it2">
         <img src="https://www.ibisc.univ-evry.fr/~dupont/21.jpg" alt="">

      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure veritatis fugiat omnis facepossimus ipsa laudate iste corrupti molestias voluptas dolores eius, ndus aut consectetur iure earum saepe, facilis eos molestiae veritatis autem voluptates.</p>
    </div>
    <div id="it3">
         <img src="https://www.ibisc.univ-evry.fr/~dupont/1.jpg" alt="">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis voluptates inventore eligendi fuga enim doloremque ab laborum, laudantium quisquam perferendis ullam sed quos adipisci fugit similique repellat nihil vero doloribus?</p>
    </div>
    <div id="it4">
        <img src="https://www.ibisc.univ-evry.fr/~dupont/31.jpg" alt="">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis voluptates inventore eligendi fuga enim doloremque ab laborum, laudantium quisquam perferendis ullam sed quos adipisci fugit similique repellat nihil vero doloribus?</p>
    </div>
  </div>
</div>

/* */
.row> * {
  
   display:flex;
   flex-direction:column;
}

.row>*>p{
  margin-top:auto;
}

/* image */

img {

    width: 100%;
    
}



/*gouttiere */

.conteneur {
  padding-right: 15px;
  padding-left: 15px;
}

.row{
  margin-right: -15px;
  margin-left: -15px;
  margin-top: 1em;
  margin-bottom: 1em;

}

.row> * {
  padding-right: 15px;
  padding-left: 15px;
   
}



/* basique CSS */





* {

}

.row {
  display: flex;
  flex-wrap: wrap;
}

.row > * {
  flex: 0 0 33.333333%;
  box-sizing: border-box;
}