JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
  <div class="li"> <span>Яблоко</span> </div>
  <div class="li"> <span>Стол</span> </div>
  <div class="li"> <span>Карандаш</span> </div>
  <div class="li"> <span>Море</span> </div>
  <div class="li"> <span>Солнце</span> </div>
  <div class="li"> <span>Кот</span> </div>
  <div class="li"> <span>Дом</span> </div>
  <div class="li"> <span>Велосипед</span> </div>
  <div class="li"> <span>Книга</span> </div>
  <div class="li"> <span>Ручка</span> </div>
  <div class="li"> <span>Компьютер</span> </div>
  <div class="li"> <span>Радуга</span> </div>
  <div class="li"> <span>Молоко</span> </div>
  <div class="li"> <span>Птица</span> </div>
  <div class="li"> <span>Роза</span> </div>
  <div class="li"> <span>Луна</span> </div>
  <div class="li"> <span>Автобус</span> </div>
  <div class="li"> <span>Гитара</span> </div>
  <div class="li"> <span>Огонь</span> </div>
  <div class="li"> <span>Снег</span> </div>
</div>

CSS

.grid {
    display: grid;
    position: relative;
    gap:25px;
}

.li:before {
    content: '';
    border: 1px solid blue;
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 99px;
    grid-area: 1/1;
    margin-top: 3px;
}

.li:not(:first-child):after {
    content: "";
    width: 2px;
    height: 29px;
    display: inline-block;
    float: left;
    margin-left: 5px;
    grid-area: 1/1;
    margin-top: -27px;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20'%3E%3Crect width='5' height='10' style='fill:%23000;' rx='3' ry='3' /%3E%3C/svg%3E");
    background-size: 4px;
}

.li > span { grid-area: 1/2; }

.li {
    display: grid;
    grid-auto-columns: 15px auto;
}