How to adequately lay out a list with an ellipsis between item?

Question

css

Hello.
Recently, I was overtaken by such a setup in the layout:

I implemented this, of course, through the background-color set to the deepest text wrapper span. The trick is that on the next layout, the parent items alternate and you have to reassign the styles by setting the modifier in the table, since one table is on a white background, the other on a gray one.

In advance (even before I realized that there was no border in the second layout =D) I put a crutch on coffee in order to reassign the color to the span.

cartable = ->
moduleName = 'cartable'
module = $ ".#{moduleName}"
carlistOdd = module.find ".carlist__autocard--#{moduleName}:nth-of-type(odd)"
carlistEven = module.find ". carlist__autocard--#{moduleName}:nth-of-type(even)"
modifyTable = (module, modificator)->
module.each ->
thisList = $ this
thisTable = thisList.find ".table"
thisTable.addClass "table- -#{modificator}"
modifyTable(carlistOdd, 'white')
modifyTable(carlistEven, 'gray')
module.exports = cartable;

And yet, academic interest torments me - is there a way to solve the issue with the layout of such a component without a rough fill of the top element? i.e. on css it’s all done somehow and put the crutch in the box ...
PS. I tried to google - in principle, they offer only the option that came to my mind ...
jsfiddle.net/L2ya3buj
codius.ru/articles/%D0%9A%D0%B0%D0%BA_%D1%81%D0%B2 ...
xiper.net/collect/html-and-css-tricks/content/tabl...

Answer 1

https://codepen.io/DNLHC/pen/KmWrJe
although according to the specification the dd and dt tags cannot be wrapped, but I think the example is clear, I
redid it with a list

Answer 2

Optional pseudo-element with border-bottom: dotted

Answer 3

I did this on flex, what do you do with underlining border-bottom: dotted and flex: 1