Elements across rows

So most of this layout is straight forward but I’m having a hard time figuring out how to make the green line that spans between and connects the two rows.
Any ideas?

i would add css class to parrent element, it would have position: relative, and those lines would be ::before or ::after elements with position: absolute;

So you think having the line as a single img and position the elements around it? I was thinking of trying to split the line into three segments and matching the connections somehow. Not sure how either will handle resizing etc.

I think the best option is to use pseudo-elements and percentages. You may need to use media queries to make adjustments at particular break-points. This article will point you in the right direction: https://www.w3docs.com/snippets/css/how-to-limit-border-length-with-css.html

Ahh I think that could work. Could be a pain to get % correct but that seems like the best solution.