JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  
  <div id="left">
    
    <span>This is a long sentence as test.</span>
  
  </div>
  <div id="right">
    
    <span>This is a long sentence as test.</span>
  
  </div>
  
</div>

CSS

body {
  background: #CACACA;
}
.wrapper {
  width: 300px;
  height: 150px;
  position: relative;
  }
  .wrapper span {
    width: 300px;
    position: absolute;
    text-align: center;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  .wrapper #left {
    width: 50%;
    height: 150px;
    background: #FFFFFF;
    display: inline-block;
    color: #000000;
    position: relative;
  }
  .wrapper #right {
    width: 50%;
    height: 150px;
    background: #000000;
    display: inline-block;
    margin-left: -4px;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
  }
  .wrapper #right span {
    left: -150px;
  }