<div class="wrapper">
  <div class="item">
    <div class="image">
      <img src="https://placehold.jp/400x300.png" alt="">
    </div>
    <div class="text">
      <p>てきすとてきすとてきすと</p>
    </div>
    <div class="link">
      <a href="">詳しく見る</a>
    </div>
  </div>
  <div class="item">
    <div class="image">
      <img src="https://placehold.jp/400x300.png" alt="">
    </div>
    <div class="text">
      <p>てきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすとてきすと</p>
    </div>
    <div class="link">
      <a href="">詳しく見る</a>
    </div>
  </div>
  <div class="item">
    <div class="image">
      <img src="https://placehold.jp/400x300.png" alt="">
    </div>
    <div class="text">
      <p>てきすとてきすとてきすとてきすとてきすとてきすと</p>
    </div>
    <div class="link">
      <a href="">詳しく見る</a>
    </div>
  </div>
</div>
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  padding: 4em;
}
.wrapper {
  display: flex;
  width: 800px;
  .item {
    width: calc((100% - 2em) / 3);
    display: flex;
    flex-direction: column;
    background: lightpink;
    &:not(:nth-child(3n)) {
      margin-right: 1em;
    }
    .image {
      background: lightgreen;
      img {
        width: 100%;
        vertical-align: middle;
      }
    }
    .text {
      flex: 1;
      padding: 1em;
      background: lightblue;
    }
    .link {
      text-align: right;
      padding: 1em;
      background: darkgray;
      a {
        color: royalblue;
      }
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.