javascript - 重複する div の周りにテキストを折り返す

Question

いくつかのテキストを含むメイン div と、メイン div に重なっている 2 つの他の div があります。しかし、メイン div のテキストは他の 2 つの div と重なっています。メインの div のテキストを、重なっている div の周りに折り返す必要があります。

この質問またはコードはばかげているかもしれませんが、助けてください。

.project1,
.project2 {
  position: absolute;
  background-color: #88c1dc;
  width: 40%;
  height: 50px;
  z-index: 11;
  border-radius: 10px;
}

.project1 {
  top: 460px;
}

.project2 {
  top: 540px;
}

.project_title_heading {
  padding-top: 8px;
  padding-left: 20px;
}

<section id="portfolio">
  <div class="container" style="padding-top: 100px;  height: 100vh; position: relative;">
    <div class="portfolio" style="background: #2186B0; position: absolute; z-index: 10; left: 29%; padding: 30px; height: 80vh; border-radius: 20px;">
      <p style="text-align: justify; font-weight: 500; font-size: 18px;">Lorem ipsum text here...</p>
    </div>
    <div class="project1">
      <h3 class="project_title_heading"><a href="">Project 1</a>
      </h3>
    </div>
    <div class="project2">
      <h3 class="project_title_heading"><a href="">Project 2</a></h3>
    </div>
  </div>

</section>

ここに画像の説明を入力