JSFiddle - React, Tailwind, and code Playground

HTML

<div class="halfed">
X
</div>

<div class="halfed1">
X
</div>

CSS

.halfed, .halfed1 {
  float: left;
}

.halfed, .halfed1 {
  font-family: arial;
  font-size: 300px;
  font-weight: bolder;
  width: 200px;
  height: 300px;
  position: relative;
  overflow: hidden;
  color: #000;
}




.halfed:before, .halfed1:before   {
  width: 50%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  content: 'X';
  color: #28507D;

}



.halfed1:before   {
  width: 100%;
  height: 55%;
  
}