JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  <div class="progress-ww">
      <div>
        
        <div class="hyp">
            -
            <div class="first">ik loop </div>
            <div class="second">lopen</div>
          </div>
          <div class="hyp">
            -
            <div class="first">klimmen </div>
            <div class="second">ik klim</div>
          </div>
          <div class="hyp">
            -
            <div class="first">geven  </div>
            <div class="second">ik geef</div>
          </div>
          <div class="hyp">
            -
            <div class="first">schreeuwen</div>
            <div class="second">ik schreeuw</div>
          </div>
          <div class="hyp">
            -
            <div class="first">blozen </div>
            <div class="second">ik bloos</div>
          </div>
        
          
          
          </div>
   </div>
</section>

CSS

.progress-ww {
  font-size: 0.8rem;
  line-height:0.8rem;
    text-align:center;
}

.hyp {
    position:relative;
}
.first, .second {
    position:absolute;
    top:0;    
}
.first {
    right:18%;     
    padding-right:35%;
}
.second {
    left:18%;     
    padding-left:35%;
}