How to lay out such a connecting line?

Question

css

https://codepen.io/GunAlv/pen/PoGyxPJ

Now, for the sake of example, the line is laid out stupidly and with the help of pseudo-elements. In practice, the first and second blocks are in no way connected with each other by markup, they can be located in different sections. The bottom line is that this line should be curved and adaptive. Seems like svg is the best fit? But so far it doesn’t occur to me how to properly size it - the sizes of the blocks and the distance between them vertically and horizontally can change