JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="left-col">
    <span class="pusher"></span>
    <span class="title">Nashi preimushestva</span>
  </div>
  
  <div class="right-col">
    <ol>
      <li>Preimushestvo Preimushestvo Preimushestvo</li>
      <li>Preimushestvo1 Preimushestvo1 Preimushestvo1</li>
      <li>Preimushestvo2 Preimushestvo2 Preimushestvo2</li>
      <li>Preimushestvo2 Preimushestvo2 Preimushestvo2</li>
      <li>Preimushestvo2 Preimushestvo2 Preimushestvo2</li>
    </ol>
  </div>
</div>

CSS

.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
}
.left-col {
  position: relative;
}
ol {
 counter-reset: sample_counter;
}
li{
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 250px;
  padding: 5px 0 5px 55px;
  margin-bottom: 10px;
  color: white;
  background-image: linear-gradient(to bottom, red 50%, darkred 50%);
  border-radius: 25px 0 0 25px;
  position: relative;
  line-height: 1.3;
}
li:before {
counter-increment: sample_counter;
content:counter(sample_counter);
flex: none;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 34px;
height: 34px;
background: white;
color: darkred;
border-radius: 50%;
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
li:after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: white;
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
}
.pusher {
  display: block;
  width: 100px;
}
.title {
  display: block;
  white-space: nowrap;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: rotate(-90deg) translateY(-50%);
  transform-origin: center center 0;
  font-size: 24px;
}