h社区，
我有一个网页的一部分，我不能得到正确的格式。我的假设是使用网格或Flexbox得到这个正确对齐，但我似乎不能得到这个正确对齐的设计（附件）。
任何指针将不胜感激。我仍在学习网格和Flexbox，并参加了一门关于这些主题的课程，以更好地了解如何最好地应用这一点，但将不胜感激任何帮助。

.hmc__family-content {
  padding: 4% 0;
}

.hmc__family-content-container {
  display: grid;
  /*grid-auto-rows: 100%;
        row-gap: 10px;*/
}

.family__content-title-container {
  padding-bottom: 4%;
  grid-column-start: 2;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 1;
  padding-bottom: 0;
  text-align: left;
  margin-left: 2%;
  grid-row: 1;
  align-self: self-end;
  padding-top: 8%;
}

.family__content-image-container {
  max-width: 50%;
  margin: 0 2% 0 auto;
  padding: 0;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  /*grid-row-end: 2;*/
  grid-row: 1 / 4;
}

.family__content-img-element {
  position: relative;
  grid-row-start: 5;
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row: 5;
}

.fc__img-element {
  position: absolute;
  left: 33rem;
  bottom: 0;
}

.family__content-title {
  font-size: 2.5rem;
  padding-right: 80%;
}

.family__content-details {
  max-width: 60%;
  margin: 0 auto 0 2%;
  padding: 0;
  text-align: left;
  /*align-self: center;*/
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-end: 2;
  grid-row: 2 / 5;
}

<section class="hmc__family-container">
  <div class="hmc__family-content">
    <div class="hmc__family-content-container">
      <div class="family__content-title-container">
        <h2 class="family__content-title">Family Background</h2>
      </div>
      <div class="family__content-image-container">
        <img class="family__content-image" src="/images/intro_header_stock.png" />
      </div>
      <span class="family__content-img-element"><img class="fc__img-element" src="/images/circle_arrow_element.png" /></span>
      <div class="family__content-details">
        <p class="family__content-details-text">Sed ut perspiciatis unde omnis natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sun</p>
      </div>
    </div>
  </div>
</section>

设计应如下所示：

我尝试过几次使用Grid或Flexbox的渲染，似乎无法让它按照设计对齐。这是我在浏览器最大化时所能得到的最接近的结果，但如果浏览器开始缩小，它会发生显著变化。