（参考サイト） https://www.ameamelog.com/flex-example/

index.html

<section class="sewing_machine">
      <div class="img_overlap column02">
        <figure class="img_overlap_img"><img src="./images/sewing_machine.jpg" width="650" height="450" alt="ミシンの画像">
        </figure>
        <div class="img_overlap_text">
          <h3 class="img_overlap_title">家庭用ミシン修理事業</h3>
          <p>堺市を中心に家庭用ミシンの専門修理を受け付けております。<br>
            もちろん、堺市以外の方でも相談をお伺いしております。<br>
            「しばらく使ってない」「部品がない」「調子が悪い」などの状態でも出来る限り対応させていただきます。<br>
            修理歴35年の職人が丁寧に修理させていただきますので、お気軽にご相談ください。<br>
            また、修理後に『壊れた原因』『使用上の癖』などを丁寧にご説明させていただきます。
          </p>
          <dl class="repair_items">
            <dt>＜主な修理項目＞</dt>
            <dd>目とび/糸からみ/糸調子　など</dd>
          </dl>
        </div>
      </div>
    </section>
    <section class="iphone">
      <div class="img_overlap img_overlap_right column02">
        <figure class="img_overlap_img"><img src="./images/iPhone.jpg" width="650" height="450" alt="iPhoneを修理している様子">
        </figure>
        <div class="img_overlap_text">
          <h3 class="img_overlap_title">iPhone修理事業</h3>
          <p>堺市を中心にiPhone修理を受け付けております。<br>
            もちろん、堺市以外の方でも相談をお伺いしております。<br>
            部品は日本国内から仕入れており、ひとつひとつ部品の検品を行った上で仕入れておりますので、ご安心ください。<br>
            iPhone内のデータはそのままで修理可能です。<br>
            画面割れ・バッテリーの消耗・充電の接触不良等、なんでもご相談ください。
          </p>
          <dl class="repair_items">
            <dt>＜主な修理項目＞</dt>
            <dd>全て</dd>
          </dl>
        </div>
      </div>
    </section>

style.css

/* 2カラム */
.column02 {
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: row; /* Safari */
  flex-direction: row;
  -webkit-justify-content: space-between !important; /* Safari */
  justify-content: space-between !important;
}

.column02 > * {
  width: 47%;
}

.img_overlap {
  justify-content: flex-end !important;
  position: relative;
}

.img_overlap_img {
  width: 54%;
  position: absolute;
  top: 0;
  left: 0;
}

.img_overlap_right {
  justify-content: flex-start !important;
}

.img_overlap_right .img_overlap_img {
  top: 0;
  left: auto;
  right: 0;
}

.img_overlap_text {
  flex-basis: 60%;
  box-shadow: 0 0px 30px rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.8);
  z-index: 2;
  margin: 20rem 0 0 0;
  padding: 5rem;
}

.img_overlap_text {
  border-radius: 20px 0 20px 0;
}

.img_overlap_right .img_overlap_text {
  border-radius: 0 20px 0 20px;
}

.img_overlap_title {
  color: #497145;
  font-size: 4rem;
  position: relative;
  margin: 0 0 2rem 0;
}