JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
  <div class="second">
    
  </div>
  <div class="first">
     dg adg adg adgh jh iajrhi ar
      af hgkail hgalih gioahg iahg 'a
      aj ghaigh laih ;oaih ia
  </div>
</div>
12
23
1231
231

CSS

.wrap {
 position: fixed;
 right: 0;
 top: 35%;
 width: 25px;
 height: 200px; 
 background: #F56;    
}
.first {
  background: #F0F;
  height: 100%; 
  width: 0;
  overflow: hidden;
  float: right;    
}
.wrap:hover {
 width: 225px;   
}
.wrap:hover .first {
 width: 200px;   
}
.second {
 width: 25px;
 height: 100%;
 background: #FF0;
 float: left;    
}