JSFiddle - React, Tailwind, and code Playground

HTML

<div class="half-color">HALIFAX</div>

CSS

body{
    font-family: arial;
}
.half-color span{
    color: #0a548b;
    font-size: 10em;
    display: inline-block;
    overflow: hidden;
}
.half-color span:nth-child(even){
    color: #0a548b;
    opacity:0.5;
}

JavaScript

$(function(){
    var $hc = $('.half-color');
    var str = $hc.text();
    $hc.html("");
    
    var i = 0;
    var chars;
    var dupText;
    
    while(i < str.length){
        chars = str[i];
        if(chars == " ") chars = "^nbsp;";
        dupText = "<span>" + chars + "</span>";
        
        var firstHalf = $(dupText);
        var secondHalf = $(dupText);
        
        $hc.append(firstHalf)
        $hc.append(secondHalf)
        
        var width = firstHalf.width()/2;
        
        firstHalf.width(width);
        secondHalf.css('text-indent', -width);
        
        i++;
    }
});