JSFiddle - React, Tailwind, and code Playground

HTML

<div class="half-color">This is a sentence</div>

CSS

body{
    font-family: arial;
}
.half-color span{
    font-size: 100px;
    display: inline-block;
    overflow: hidden;
}

.space{
    width: .2em;
}
.half-color span:nth-child(even){
    color: red;
}

JavaScript

$(function(){
    var $hc = $('.half-color');
    var str = $hc.text();
    $hc.html("");
    
    var i = 0;
    var chars;
    var dupText, dupText2;
    var c = "c";
    
    while(i < str.length){
        chars = str[i];
        if(chars == " ") {
            dupText = "<span class='space'>" + chars + "</span>";
        } else {
            dupText = "<span>" + chars + "</span>";
        }
        
        $hc.append(dupText);
        $hc.append(dupText);
        
        i++;
    }
    
    var width;
    
    for(i=0; i < str.length*2; i += 2){
        width = $('span:nth-child('+ (i+1) + ')').width();
        if(width != 0){
            $('span:nth-child('+ (i+1) + ')').width(width/2);
            $('span:nth-child('+ (i+2) + ')').css('text-indent', -width/2);
        }
    }
});