JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque ipsa saepe, blanditiis quaerat harum autem est aliquam distinctio voluptates modi sequi dignissimos debitis, a nobis doloremque omnis voluptatibus magnam unde.</div>
  
</div>
<br>
<div class="outer">
  <div class="inner">Lorem ipsum dolor sit amet.</div>
  
</div>

CSS

.outer {
  display: flex;
  height: 100px;
  border: 1px solid black;
  overflow-y: auto;
  width: 100px;
}

.inner {
  width: calc(100px - 40px); /* 40px это padding-right */
  margin-right: calc(100% - 80px);
  word-break: break-all;
}

.padding {
  width: 10px;
  height: 100%;
  background: red;
}