Vertical line in the center of the block, how?

Question

JavaScript

Guys, tell me, please, how to organize this at all, on what? js, canvas? What is better and easier? This is the first time I've encountered this and I would like to hear the answer of experts.

And if someone can give a link to "codepen" that would be very informative. Thank you.

Answer 1

I was not too lazy and implemented your example https://jsfiddle.net/aefq89h9/ although at first I just wanted to describe it in words))
Or here https://jsfiddle.net/ckLz0x3c/ is another option, because with adaptability, it would be better to know exactly the distance from the line.
In general, you can think of many more options, but I hope you understand the meaning.

Answer 2

I googled it, in principle the idea should be clear, but circles can be made through pseudo-elements
https://codepen.io/Acconut/pen/ftFaw
and here is an Indian video https://www.youtube.com/watch?v=B1WYeCf186Q

Answer 3

something like a stepper or as shown above https://material.io/guidelines/components/steppers...