JSFiddle - React, Tailwind, and code Playground

HTML

<ol>
    <li><span>Test</span><span class="line"></span></li>
    <li><span>Test2</span><span class="line"></span></li>
    <li><span>Test3</span><span class="line"></span></li>
</ol>

CSS

ol {
    padding: 0;
    list-style: none;
    font-size: 1.25em;
    font-family: sans-serif;
    width: 60%;
    margin-left: 20%;
    padding: 1em;
    border: 1px dotted #bbb;
    counter-reset: list-counter;
}
li {
    display: table;
}
li span, li:after {
    display: table-cell;
    vertical-align: bottom;
    padding: 0 1em;
}
li span.line {
    width: 100%;
    border-bottom: 1px dotted #000;
}
li:after {
    counter-increment: list-counter;
    content: counter(list-counter);
    float: right;
}