JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="test"></ul>

CSS

li {
    list-style: none;
}

.timestamp {
    width:20%; 
    float: left;    
    font-weight: bold;
}

.number {
    float: left;
    text-align:left;
    width:20%;
    font-weight: bold;
}

JavaScript

var currentTime = new Date()
                    var hours = currentTime.getHours()
                    var minutes = currentTime.getMinutes()
                    var seconds = currentTime.getSeconds()
                    
                    
                    if(hours<10)
                    {
                        hours = "0"+hours;
                    }
                    
                    if(minutes<10)
                    {
                        minutes = "0"+minutes;
                    }
                    
                    if(seconds<10)
                    {
                        seconds = "0"+seconds;
                    }


var str = "Ben Nadel reviews the various approaches to Sachin Ramesh Tendulkar is a former Indian cricketer widely acknowledged as the greatest batsman of the modern generation, popularly holds the title  among his fans Sachin Ramesh Tendulkar is a former Indian cricketer widely acknowledged as the greatest batsman of the modern generation, popularly holds the title  among his fansSachin Ramesh Tendulkar is a former Indian cricketer widely acknowledged as the greatest batsman of the modern generation, popularly holds the title  among his fans  substring";
var words = str.split(" ");
var tenLengthString = "";
var html='';
for(var index = 0; index < words.length; index++)
{
    var currentWord = words[index];
    var currentLength = tenLengthString.length;    
    if(((currentLength + currentWord.length + ((currentLength > 0) ? 1: 0))) > 30)
    {        
        html+='<li><span class="timestamp">'+ hours + ":" + minutes + ":" +  seconds+'</span><span class="number">'+ 1 +'</span>'+tenLengthString+'</li>';
        console.log(tenLengthString);        
        tenLengthString = currentWord;        
    } else {
        if(currentLength > 0)
            tenLengthString += " ";    
        tenLengthString += currentWord;
    }    
    if(index == words.length - 1){
      console.log(tenLengthString);
      ...