What is the best way to make this block without js (column hover with frame)?

Question

css

Good afternoon,
I received a layout from the designer with this block:

The layout is based on bootstrap. On the Mobile resolution, this block changes to another one.
The first thought is a regular table and here is a way to hover a column:
https://css-tricks.com/simple-css-row-column-highl...
but how to implement a hover frame in this case? the only idea is to use js to calculate the cell index and set a frame for other cells with the same index, plus check if this is the first or last row, then set a different frame.
The second thought is to have bootstrap columns in the ul>li>span column. Create css table (ul - dispaly: table, li - row, span - cell).
In this case, we have no problem either with highlighting the column or with its frame. But another problem appears - li in different lists will have different heights. (On the layout, the text is the same length, but who knows what will happen on the real site). You can set the height of cells by hard-coding height. But this is also not good, because. with a large number of text, it will be lost.
In general, I will be glad to any interesting ideas.
Thank you!

Answer 1

I read it three times, did not understand anything)
What is the difficulty? Normal border, normal hover.
Layout a la for a table, make divs, use flexbox.
It is still better to catch the height of the lines through JS so that it does not jump.
Though it is possible to be perverted certainly, to make through the rigid task of height.
A solution came to my sick head without JS on tables by lines.
But I won’t voice it))) Since if I saw this on the site, I would tear off the head of the layout designer)
But there is a solution :))) Without JS and with even blocks)))

Answer 2

Layout not in rows, but in columns, set border-color to the parent of the column at hover.
If you have it laid out differently, give the code. Because it is difficult to understand your html from the picture, and the description is even more difficult.

Answer 3

It seems to me that something will still have to be sacrificed.
Globally, there are two options: either to make up a real table (but then the border will have to be drawn in pieces through JS), or the table is made up in columns (we get by with pure CSS, but there is a danger of moving around if there is a lot of text somewhere).
I think it's better to do it in JS, although I myself try to do without it if possible.