JSFiddle - React, Tailwind, and code Playground

HTML

<div class="items">
  <div class="item"><span>1. маленький текст</span></div>
  <div class="item"><span>2. здесь чуть больше текста</span></div>
  <div class="item"><span>3. очень много текста, который переполянет весь блок</span></div>
</div>

CSS

.items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 300px;
  background: blue;
}
.item {
    box-sizing: border-box;
    color: #fff;
    max-width: 300px;
    display: block;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
    border-left: 10px solid green;
    padding: 10px 0px;
}
.item span {
    background: green;
    padding-bottom: 100%;
    padding: 3px 4px 100% 0px;
    white-space: pre-wrap;
    outline: 10px solid green;
    padding-right: 10px;
}