JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
      <div class="body">
	     
         <div class="content" contenteditable=true>
             <div class="gutter"></div>
            Enter some thing here upto getting scroll..
             more data..<br/>
             more data..<br/>
             more data..<br/>
              more data..<br/>
              more data..<br/>
              more data..<br/> more data..<br/> more data..<br/> more data..<br/> more data..<br/> more data..<br/> more data..<br/> more data..<br/> more data..<br/> more data..<br/> more data..<br/>
         </div>
	  </div>
   </div>

CSS

.wrapper{
     width:400px;
	 height:250px;
	 border:1px solid #757575;
   }
   .body{
     width:100%;
	 height:100%;
	 overflow:auto;
	 padding-left:22px;
   }
   .gutter{   
	 position:absolute;
	 right:100%;
     width:20px;
    min-height:100%;
	 background:#e5e5e5;
	 border-right:1px solid #757575;
   }
.content{
  width:380px;
  min-height:100%;
position:relative;
}
}