JSFiddle - React, Tailwind, and code Playground

by swfour

HTML

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

CSS

.progress-ww {
    font-size: 0.8rem;
    line-height:0.8rem;
    text-align:center;
}
.left {
    text-align:left;
}
.right {
    text-align:right;
}
.right:after {
    content:' -';
    margin-right:5px;
}
.left, .right {
    display:inline-block;
    width:50%;
}

JavaScript

$('.progress-ww div').each(function () {
    var part = $(this).text().split(' - ')
    $(this).replaceWith("<div class='right'>" + part[0] + "</div><div class='left'>" + part[1] + "</div>");
});