<section>
  <div class="flexBox">
    <div class="photo">
      <img src="https://www.nan-demo.work/wp-content/uploads/2022/07/image05.jpg">
    </div>
    <div class="text">
      <p>サンプルテキストサンプルテキスト<br>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト<br>サンプルテキストサンプルテキストサンプルテキスト</p>
    </div>
  </div>
   <div class="flexBox">
    <div class="photo">
      <img src="https://www.nan-demo.work/wp-content/uploads/2022/07/image06.jpg">
    </div>
    <div class="text">
      <p>サンプルテキストサンプルテキスト<br>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト<br>サンプルテキストサンプルテキストサンプルテキスト</p>
    </div>
  </div>
   <div class="flexBox">
    <div class="photo">
      <img src="https://www.nan-demo.work/wp-content/uploads/2022/07/image07.jpg">
    </div>
    <div class="text">
      <p>サンプルテキストサンプルテキスト<br>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト<br>サンプルテキストサンプルテキストサンプルテキスト</p>
    </div>
  </div>
   <div class="flexBox">
    <div class="photo">
      <img src="https://www.nan-demo.work/wp-content/uploads/2022/07/image08.jpg">
    </div>
    <div class="text">
      <p>サンプルテキストサンプルテキスト<br>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト<br>サンプルテキストサンプルテキストサンプルテキスト</p>
    </div>
  </div>
</section>
section,div,p,img {
  padding:0;
  margin:0;
  box-sizing:border-box;
  display: block;
}

img {
  width:100%;
}

.flexBox {
  display:flex;
  justify-content: space-between;
  align-items: center;
  width:100%;
}

.flexBox:nth-child(2n) {
  display:flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row-reverse;
  width:100%;
}

.photo,.text {
  width:50%;
}

.text {
  padding:2rem;
}

.photo,.text p {
  line-height:4rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.