We are doing a TOC for a book that where each line entry is in a 'p' tag (p.toc-chapter-line). Within every line are two span tags: 'span.toc-chapter-title' and 'span.toc-chapter-title'. In the attached image the red line signifies where we would like the 'span.toc-chapter-title' tags to line up. Is there anyway to achieve this? We have been trying for days.



Here is the CSS we are trying:
.toc p {
margin-left: 20pt;
text-indent: -20pt;
text-align: left;
font-style: normal;
font-weight: normal;
hyphens: none;
}


p.toc-chapter-line {
page-break-inside: avoid;
margin-top: 8pt;
margin-bottom: 3pt;
margin-left: 28pt;
line-height: 14pt;
}

span.toc-chapter-title {
margin-left: 50pt;
}

1. !_TOC.jpg‎ 410.6 kB

You could make the first span "float: left" and give it a fixed width, or you could make the spans inline table cells or flex items.

Works perfectly! Thank you