css - 3 nested divs - Fixed Width parent, Left & Right Width based on content, empty Centre Width equaling the difference? -

This can really be tricky!

What I want to achieve here:

Here's my JSField

I have tried different things without any luck. The problem is that the left and right div widths are based on both text width. I do not want to join the dotted line by going down the left and right side and mask it with the background color as the background of the site is a gradient.

At least in this case, the identity of parents however.

Any thoughts?

I hate to suggest using tables, but this is an easy way to table / Div / css hybrid solution. Test and work.

  & lt; Div style = "position: relative, width: 300px; height: auto;" & Gt; & Lt; Table style = "width: 100%" & gt; & Lt; TR & gt; & Lt; Td style = "float: left; width: auto" & gt; A & lt; / Td> & Lt; Td style = "width: 100%; text-line: left;" & Gt; & Lt; Div style = "width: 100%; border bottom: 1px dotted #fff; height: 10px;" & Gt; & Lt; / Div & gt; & Lt; / TD & gt; & Lt; Td style = "float: correct" & gt; Z & lt; / Td> & Lt; / TR & gt; & Lt; / Table & gt; & Lt; / Div & gt; & Lt; Div style = "position: relative: width: 300px; height: auto;" & Gt; & Lt; Table style = "width: 100%" & gt; & Lt; TR & gt; & Lt; Td style = "float: left; width: auto" & gt; 1 & lt; / Td> & Lt; Td style = "width: 100%; text-line: left;" & Gt; & Lt; Div style = "width: 100%; border bottom: 1px dotted #fff; height: 10px;" & Gt; & Lt; / Div & gt; & Lt; / TD & gt; & Lt; Td style = "float: correct" & gt; Infinite & lt; / Td> & Lt; / TR & gt; & Lt; / Table & gt; & Lt; / Div & gt;