JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  Hello Toster
  <br>border-radius: 100px;
  <br>overflow:hidden;
  <br>background-color:red;
  <br>color:white;

  <div class="over">
    <span class="over-text">
      Hello Toster
      <br>border-radius: 100px;
      <br>overflow:hidden;
      <br>background-color:red;
      <br>color:white;
    </span>
  </div>
</div>

CSS

.container {
      position: relative;
      width: 300px;
      height: 200px;
    }


    .over {
      position: absolute;
      right: 0;
      top: 0;
      width: 100px;
      height: 100%;
      border-radius: 50px 0 0 50px;
      overflow: hidden;
      background-color: red;
      transition: all 1s;
    }

    .over-text {
      position: absolute;
      display: block;
      right: 300px;
      transform: translateX(100%);
      /*сдвинем справа налево на ширину большого блока и компенсируем размер текстового блока*/

      /*либо задать ширину тексту равную ширине большого блока (но не в %, а то посчитает от красного)
      и right 0
      */

      /*либо left: -30px*/
      width: 300px;
      height: 200px;
      color: white;
      transition: all 1s;
    }

    .container:hover .over {
      width: 270px;
    }