Html+css write content similar to Word directory style

Word directory in the format of this is very common, to use HTML+CSS to write out of the beginning is a little confused.

The left and right sides are content open width, the width of the middle content is not deterministic, but also with the left and right side of the content dynamic change.

The final solution is to add a white background color to the content on the right, then set the level z-index to cover the line beyond the right.

Html

<ul>      <Li><Divclass= "List-nap1">Travel 12 km</Div><Divclass= "List-line"></Div><Divclass= "List-con1">25 USD</Div></Li>      <Li><Divclass= "List-nap1">Duration 30 minutes</Div><Divclass= "List-line"></Div><Divclass= "List-con1">5 USD</Div></Li>      <Li><Divclass= "List-nap1">High speed fee/parking fee</Div><Divclass= "List-line"></Div><Divclass= "List-con1">30 USD</Div></Li>      <Li><Divclass= "List-nap1">Long-Haul fee</Div><Divclass= "List-line"></Div><Divclass= "List-con1">6 USD</Div></Li>      <Li><Divclass= "List-nap1">Personal payment</Div><Divclass= "List-line"></Div><Divclass= "List-con1">30 USD</Div></Li>      <Li><Divclass= "List-nap1">Corporate Payments</Div><Divclass= "List-line"></Div><Divclass= "List-con1">10 USD</Div></Li></ul>

As1

ul Li Div{Display:Inline-block;}. List-line{Border-top:1px dashed #d8d8d8;position:Absolute;Top:11px;margin:0 5px;width:75%;}. List-con1{position:Absolute; Right:0px;padding:0 5px;Z-index: -;text-align: Right;background:#fff;Padding-right:80px;}

Html+css write content similar to Word directory style