JSFiddle - React, Tailwind, and code Playground

HTML

<div class="text"> MATT WAS HERE </div>

CSS

.text{
    font-size:100px;
    font-family:"Arial", Helvetica, sans-serif;
    font-weight:bold;
    color: #0C5894;
}

#vflip {
    margin:0;
    padding:0;
    display:inline-block;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    color:#ff0000;
}


.halfStyle {
    position:relative;
    display:inline-block;
    width:1;
    font-size:100px;
    color: #0C5894;
    overflow:hidden;
    white-space: pre;
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    width: 50%;
    content: attr(data-content); /* dynamic content for the pseudo element */
    overflow:hidden;
    color: #6898BC;
}

JavaScript

$(".text").each(function() {
    var text = $(this).text();
    var flipped = text.split('A').join('<span class="textToHalfStyle" id="vflip">V</span>');
    $(this).html(flipped);
});

var textToHalfStyle = $('.textToHalfStyle').text();
var textToHalfStyleChars = textToHalfStyle.split('');
$('.textToHalfStyle').empty();
$.each(textToHalfStyleChars, function(i,v){
    $('.textToHalfStyle').eq(i).append('<span class="halfStyle" data-content="' + v + '">' + v + '</span>');
});