How can you split text by 2 colors vertically?

You can of course use CSS3 Gradient and Clip Properties. I am aware of the web kits I have used but not sure about other browsers, if you want you can try this

Demo (view it on chrome)

div {
  font: 40px Arial;
  background: -webkit-linear-gradient(top, #0d2172 0%,#0d2172 50%,#ff2828 50%,#ff0000 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

      

        
        
        
      

    

Note. Since the web developer is not using any recent browsers, if you know any property property that works the same, feel free to edit my answer