JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <span class="d"></span>
        <span class="l">Big title text here xyxyxyx</span>
        <span class="r">(pdf) 57mb</span>
    </li>
    <li>
        <span class="d"></span>
        <span class="l">Small title text</span>
        <span class="r">(pdf) 57mb</span>
    </li>
</ul>

CSS

ul {}
ul li {width: 400px; position: relative; height: 20px;}

.l {left: 0; position: absolute; height: 20px; background: #fff;}
.r {right: 0; position: absolute;height: 20px; background: #fff;}
.d {border-bottom: 1px #000 dotted; position: absolute; width: 100%; height: 17px; top:0}