<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <img src="http://baconmockup.com/250/200" alt="" />
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio, eveniet.</p>
      <a href="">Link</a>
    </div>
  </li>
    
     <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
      <a href="">Link</a>
    </div>
  </li>
  
  <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium.</p>
      <a href="">Link</a>
    </div>
  </li>
  
  <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur optio ipsa fuga vel repudiandae impedit illum delectus nihil error animi nobis quaerat quidem, amet, praesentium aspernatur inventore numquam! Totam, dolorem inventore reprehenderit, culpa obcaecati!</p>
      <a href="">Link</a>
    </div>
  </li>
  
  <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo veniam tempore vero velit deleniti corporis recusandae placeat eum repellendus modi architecto, iste, numquam nulla, praesentium fuga soluta eos consequatur sequi expedita! Ea aspernatur explicabo optio ducimus officia blanditiis voluptas possimus veniam maxime!</p>
      <a href="">Link</a>
    </div>
  </li>

  
    <li class="list-item">
    <div class="list-content">
      <h2>Title</h2>
      <img src="http://baconmockup.com/250/200" alt="" />
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum molestiae esse dolore corporis velit fugiat ipsam tempore optio dicta. Magnam iusto facere, maxime! Praesentium quo laborum, deserunt adipisci. Ipsam officia delectus repudiandae, aperiam magnam blanditiis fuga similique.</p>
      <a href="">Link</a>
    </div>
  </li>
</ul>
Resources
* {
  box-sizing: border-box;
}
body {
  background-color: #f5f5f5;
  margin: 0 auto; 
  max-width: 60em;
  line-height: 1.3;
}
ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
img {
  width: 100%;
}
h2 {
  margin-top: 0;
  margin-bottom: 0.4em;
}

/*Flex items*/
.list {
  display: flex;
  flex-wrap: wrap;
}
.list-item {
    display: flex; 
  padding: 0.5em;
    width: 100%;
}
@media all and (min-width: 40em) {
  .list-item {
    width: 50%;
  }
}
@media all and (min-width: 60em) {
  .list-item {
    width: 33.33%;
  }
}
.list-content {
    background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 1em;
    width: 100%;
}
.list-content p {
    flex: 1 0 auto;
}
Resources
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.