JSFiddle - React, Tailwind, and code Playground

HTML

<div class="list-block">
  <div class="list-block__head">
    <div class="line-dashed"></div>
  </div>
  <ul class="list-block__listing">
    <li class="item">
      item 1
    </li>
    <li class="item">
      item 2
    </li>
    <li class="item">
      item 3
    </li>
  </ul>
</div>
<div class="list-block">
  <div class="list-block__head">
    <div class="line-dashed"></div>
  </div>
  <ul class="list-block__listing">
    <li class="item">
      item 1
    </li>
    <li class="item">
      item 2
    </li>
    <li class="item">
      item 3
    </li>
    <li class="item">
      item 4
    </li>
    <li class="item">
      item 5
    </li>
    <li class="item">
      item 6
    </li>
    <li class="item">
      item 7
    </li>
  </ul>
</div>
<div class="list-block">
  <div class="list-block__head">
    <div class="line-dashed"></div>
  </div>
  <ul class="list-block__listing">
    <li class="item">
      item 1
    </li>
    <li class="item">
      item 2
    </li>
    <li class="item">
      item 3
    </li>
    <li class="item">
      item 4
    </li>
    <li class="item">
      item 5
    </li>
  </ul>
</div>

CSS

.list-block .list-block__head {
  position: relative;
}

.list-block .list-block__head .line-dashed {
  width: 1px;
  border-left: 1px dashed;
  position: absolute;
  top: 0;
  left: 0
}

.line-dashed.green {
  border-color: #1fa88d;
}

JavaScript

$('.list-block').each(function() {
  let height_image = $(this).find('.list-block__head img').height();
  let height_listing = $(this).find('.list-block__listing').height()

  $(this).find('.line-dashed').css({
    height: height_listing
  });

  $('.list-block').each(function() {
    let items = $(this).find('ul li');
    items.css('opacity', 0);

    for (var i = 0; i < items.length; i++) {
      $(items[i]).delay(i * 400).animate({
        opacity: 1
      }, 400);
    }
  });
});