I managed to make a mockup of a timeline with blocks. It has a look that is ok. You can run the snippet to take a look or see this image:
.list { display: flex; flex-direction: column;}.item { display: flex;}.item:not(:last-child) { margin-bottom: 10px;}.left { display: flex; flex-direction: column;}.right { flex: 1; margin-left: 10px;}.border { width: 1px; border-radius: 10px; background: black; height: 100%; margin: 2px auto;}.bubble,.big-bubble { padding: 10px 20px; border: 1px solid black; border-radius: 5px;}.big-bubble { padding: 30px 0; border: 1px solid black; border-radius: 5px;}<div class="list"><div class="item"><div class="left"><div class="bubble"></div><div class="border"></div></div><div class="right"><div class="big-bubble"></div></div></div><div class="item"><div class="left"><div class="bubble"></div><div class="border"></div></div><div class="right"><div class="big-bubble"></div></div></div><div class="item"><div class="left"><div class="bubble"></div><div class="border"></div></div><div class="right"><div class="big-bubble"></div></div></div></div>But I'm not satisfied with the result. I would like to align my timeline like this. The idea would be that the info bubble on the right starts in the vertical middle of the bubble on the left.
I don't see how to do it with flex.