JSFiddle - React, Tailwind, and code Playground

JavaScript

var text = "I am under the text above me and there is lots more text to come.\nI am even moving onto a new line since I have more text"

var highlightBorders = [[2, 3, 4, 6], [6, 7]]; // YOUR TASK: implement the logic to display the following lines

var color_per_word_position =  {0:'lime', 1: 'red', 2: 'cyan', 3:'orange', 4: 'yellow', 5: 'red'}

/* generate CSS */
var style = document.createElement('style');
for (var i in color_per_word_position) {
    style.innerHTML += '.hl' + i + '{background:' + color_per_word_position[i] + '}';
}
document.head.appendChild(style);

/* determine character width */
var el = document.createElement('pre');
el.style.display = 'inline-block';
el.innerHTML = ' ';
document.body.appendChild(el);
var width = parseFloat(getComputedStyle(el).width);
document.body.removeChild(el);

/* generating the text */
text = text.split('\n');
var pre = document.createElement('pre');
text.forEach(function (line, i) {
    var div = document.createElement('div');
    var words = line.split(' ');
    var result = [];
    highlightBorders[i].forEach(function (len, j) {
        var span = document.createElement('span');
        span.innerHTML = words.splice(0, len).join(' ');
        span.className = 'hl' + j;
        if (j) {
            span.style.marginLeft = width + 'px' // YOUR TASK: implement the logic
        }
        div.appendChild(span);
    });
    pre.appendChild(div);
});

document.body.appendChild(pre);