JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="toc">
  <li><span class="title">Foo</span>
      <span class="chapter">Chapter 1</span></li>
  <li><span class="title">Bar</span>
      <span class="chapter">Chapter 2</span></li>
</ul>

CSS

.toc li {
  display: flex;
}
.toc li .title {
  order: 1;
}
.toc li .chapter {
  order: 3;
}
.toc li::after {
  content: "";
  border-bottom: 1px dotted;
  flex-grow: 1;
  order: 2;
}