JSFiddle - React, Tailwind, and code Playground

HTML

<div class="timeline">
    <ol>
      <li>abc</li>
      <li>hello welcome</li>
      <li>cool summer, this is a long text, it will break to a new line</li>
      <li>hi there, this is a long text, it will break to a new line</li>
      <li>whats up</li>
    </ol>
</div>

CSS

.timeline {
  overflow-x: hidden;
  padding: 20px 0;
}

.timeline ol {
  width: 100%;
  transition: all 1s;
  margin:0;
  padding:0;
  display:flex;
  justify-content: space-between;
}

.timeline ol li {
  list-style:none;
  position: relative;
  text-align:center;
  flex-grow: 1;
  flex-basis: 0;
  padding: 0 5px;
}

.timeline ol li:before {
  content:"";
  width:10px;
  height:10px;
  display:block;
  border-radius:50%;
  background: #ccc;
  margin:0 auto 5px auto;
}
.timeline ol li:not(:last-child)::after {
    content: "";
    width: calc(100% - 14px);
    height: 2px;
    display: block;
    background: #ccc;
    margin: 0;
    position: absolute;
    top: 4px;
    left: calc(50% + 7px);
}