JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
 <div class="page-biography-section-right">
  <div class="page-biography-section-right-sub-section-left">
    <div class="page-biography-section-right-sub-section-left-inside">
      <div class="biography-bloc-text" id="_1944-1984">
        <a href="#"></a>
        <h1>(1944-1984)</h1>
        <ul>
          <li>1944-1969</li>
          <li>1969-1972</li>
          <li>1973-1984</li>
        </ul>
      </div>
      <div class="biography-bloc-text" id="_1984-1998">
        <a href="#"></a>
        <h1>(1984-1998)</h1>
        <ul>
          <li>1984-1986</li>
          <li>1987-1990</li>
          <li>1989-1995</li>
          <li>1995-1998</li>
        </ul>
      </div>
      <div class="biography-bloc-text" id="_1998-2021">
        <a href="#"></a>
        <h1>(1998-2021)</h1>
        <ul>
          <li>1998-2003</li>
          <li>2003-2009</li>
          <li>2010-2013</li>
          <li>2014-2021</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="page-biography-section-right-sub-section-right">
    <div class="page-content-section-right-img-container taille_1" rel="1944-1984">
      <img src="https://fastly.picsum.photos/id/175/536/354.jpg?hmac=EHlNLOT5uMj3h2CECyDN3o-puYqhu1a9chiXMuvQWCw" alt="dsds">
      <div class="caption">
        Lorem ipsum dolor sit amet, consectetur <br /> adipiscing elit, sed do eiusmod
      </div>
    </div>
    <div class="page-content-section-right-img-container taille_3" rel="1944-1984">
      <img src="https://fastly.picsum.photos/id/430/536/354.jpg?hmac=uxrNCXgJuycp2JMZ9jpZb5ThTsZIplRTSPuc4ybMyws" alt="dsds">
      <div class="caption">
        Lorem ipsum dolor sit amet, consectetur <br /> adipiscing elit, sed do eiusmod
      </div>
    </div>
    <div class="page-content-section-right-img-container taille_1" rel="1944-1984">
      <img...

CSS

.page-biography-section-right {
  width: 85%;
  display: flex;
}

.page-biography-section-right-sub-section-left {
  width: calc(100% - (50% / 0.85));
}

.biography-bloc-text {
  padding: 15px;
  background-color: white;
  padding-bottom: 25vh;
  border-top: 0.5px solid;
  position:sticky;
  top: 85.5px;
}

.biography-bloc-text a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.biography-bloc-text h1 {
  font-size: 61px;
  line-height: 68px;
}

.biography-bloc-text ul {
  list-style: none;
  font-size: 15px;
  line-height: 17px;
}

.page-biography-section-right-sub-section-right {
  width: calc(50% / 0.85);
}

.page-content-section-right-img-container {
  position: sticky;
  top: 85.5px;
  margin-bottom: 30px;
}

.page-content-section-right-img-container.taille_2 {
  padding-right: 25%;
}

.page-content-section-right-img-container.taille_3 {
  padding-right: 33%;
}

.page-content-section-right-img-container img {
  margin-bottom: 15px;
}

.caption {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
}

img {
  width: 100%;
  height: auto;
  display: block;
}