<ul>
  <li>
    <img src="https://www.nan-demo.work/wp-content/uploads/2022/07/image03.jpg">
    <p class="title">タイトル</p>
    <p>サンプルテキストサンプルテキスト。
      <br>サンプルテキストサンプルテキストサンプルテキストサンプルテキスト。</p>
    <a class="linkBtn">詳細はこちら</a> 
  </li>
  <li>
    <img src="https://www.nan-demo.work/wp-content/uploads/2022/07/img05.jpg">
    <p class="title">タイトル</p>
    <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト。</p>
    <a class="linkBtn">詳細はこちら</a> 
  </li>
  <li>
    <img src="https://www.nan-demo.work/wp-content/uploads/2022/07/image02.jpg">
    <p class="title">タイトル</p>
    <p>サンプルテキストサンプルテキスト。</p>
    <a class="linkBtn">詳細はこちら</a> 
  </li>
</ul>
ul,li,p,img {
  padding:0;
  margin:0;
  box-sizing:border-box;
}

img {
  width: 100%;
  margin:0 0 1rem;
}

p {
  margin: 0 0 2rem;
}

ul {
  display: flex;
  justify-content: space-between;
}
 
li {
  display: flex;
  flex-direction: column;
  width: 32%;
  border: 1px solid #ddd;
  padding: 1.4rem;
}
 
li p.title {
  font-size:110%;
  font-weight:bold;
  margin:0 0 0.6rem;
}

.linkBtn {
  margin: auto auto 0;
  text-align: center;
  background: #000;
  color: #fff;
  padding: 0.5rem 0;
  width:60%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.