JSFiddle - React, Tailwind, and code Playground

HTML

<section>
    <div class="progress-ww">
        <ul>
            <li>
                <span>lopen</span>
                -
                <span>ik loop</span>
            </li>
            <li>
                <span>klimmen</span>
                -
                <span>ik klim</span>
            </li>
            <li>
                <span>geven</span>
                -
                <span>ik geef</span>
            </li>
            <li>
                <span>schreeuwen</span>
                -
                <span>ik schreeuw</span>
            </li>
            <li>
                <span>blozen</span>
                -
                <span>ik bloos</span>
            </li>
        </ul>
    </div>
</section>

CSS

*,
*:before,
*:after{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
.progress-ww {
  font-size: 0.8rem;
  line-height:0.8rem;
  text-align:center;
}
ul{
    list-style-type:none;
}
    ul li{
        width:100%;
        position: relative;
    }
        ul li span{
            position: absolute;
            right:0;
            left:50%;
            text-align:left;
            padding-left:5px;
            display:inline-block;
        }
        ul li span:first-child{
            position: absolute;
            left:0;
            right:50%;
            text-align:right;
            padding-right:5px;
            display:inline-block;
        }
.hyphen{
    display:inline-block;
    width:10px;
}