JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><span class='line'></span><span class='number'>1</span><div class='blob'>Hello</div></li>
    <li><span class='number'>2</span><div class='blob'>Goodbye</div></li>
</ul>

CSS

ol,ul {
    list-style : none;
}
li{
    display : flex;
    flex-flow: row;
    min-height : 100px;
    position : relative;
}

span.number {
    margin-right : 100px;
    text-align: center;
    width : 1em;
    height : 1em;
    background-color : red;
    border-radius : 50%;
    z-index : 1;
}

span.line {
    position : absolute;
    height : 100%;
    border : solid black 0.1em;
    top : 0.5em;
    left : 0.45em;
}
li:last-child span.line{
    display : none;   
}
}
span.blob {
    
}