JSFiddle - React, Tailwind, and code Playground

HTML

<div class="items">
  <div class="item"><span><b>1. маленький текст</b></span></div>
  <div class="item"><span><b>2. здесь чуть больше текста</b></span></div>
  <div class="item"><span><b>3. очень много текста, который переполянет весь блок 3. очень много текста, который переполянет весь блок</b></span><b></b></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;
    border-left: 10px solid green;
    padding: 10px 0px;
}
.item span {
    background: green;
    padding-right: 10px;
    border-top: 1000px solid green;
    padding-bottom: 11px;
}
.item b {
  font-weight: normal;
  position: relative;
  z-index: 100;
}