JSFiddle - React, Tailwind, and code Playground

HTML

<div class="qa-item">
  <div class="qa-item__img-box"><img src="https://placehold.jp/150x150.png" alt=""></div>
  <div class="qa-item__txt-box">
    <p class="qa-item__question">ダミーテキストダミーテキストダミーテキストダミーテキスト。</p>
    <p class="qa-item__answer">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト。</p>
  </div>
</div>

<div class="qa-item">
  <div class="qa-item__img-box"><img src="https://placehold.jp/150x150.png" alt=""></div>
  <div class="qa-item__txt-box">
    <p class="qa-item__question">ダミーテキストダミーテキストダミーテキストダミーテキスト。</p>
    <p class="qa-item__answer">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト。</p>
  </div>
</div>

<div class="qa-item">
  <div class="qa-item__img-box"><img src="https://placehold.jp/150x150.png" alt=""></div>
  <div class="qa-item__txt-box">
    <p class="qa-item__question">ダミーテキストダミーテキストダミーテキストダミーテキスト。</p>
    <p class="qa-item__answer">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト。</p>
  </div>
</div>

CSS

/*==================================================

** リセットCSS
==================================================*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding: 1em;
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

/*==================================================

** Q and A
==================================================*/
.qa-item {
  display: flex;
  gap: 2%;
  
  border: 3px solid red;
}

.qa-item:not(:first-child) {
  margin-top: 2vw;
}

.qa-item__img-box {
  flex-shrink: 0;
  width: 25%;
}

.qa-item__img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.qa-item__txt-box {}

.qa-item__question {}

.qa-item__question::before {
  content: "Q.";
}

.qa-item__answer {
  margin-top: 1em;
}

.qa-item__answer::before {
  content: "A.";
}

.qa-item__question,
.qa-item__answer {
  position: relative;
  padding-left: 1.5em;
}

.qa-item__question::before,
.qa-item__answer::before {
  position: absolute;
  top: 0;
  left: 0;
}