created: 2020-09-16T00:22:10.000Z

flexで横並びカードのレイアウト最小限

画像が左、説明文が右というレイアウトの最小限の定義

<iframe src="https://codepen.io/gsxuomug/embed/preview/ZEWjvBq?height=300&slug-hash=ZEWjvBq&default-tabs=html%2Cresult&host=https%3A%2F%2Fcodepen.io" style="border: 0; width: 100%; height: 300px;" allowfullscreen></iframe>

<div class="card">
  <div class="card-left">
    <img src="https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/1989/19892000.jpg?_ex=200x200" />
  </div>
  <div class="card-right">
    <h3>{book.title}</h3>
    <p>{book.itemCaption}</p>
  </div>
</div>
.card {
  display: flex;
  /* PCで閲覧された時に横幅を絞っておく */
  width: 600px;
}

.card-left {
  width: 30%;
}
.card-left img {
  /* この定義をしないと画像がはみ出る */
  width: 100%;
}

.card-right {
  width: 70%;
}