JSFiddle - React, Tailwind, and code Playground

HTML

<h2>What I'm trying to achieve</h2> 
<pre>
Car ............................... $2000
Boat ............................. $20000
Airplane ........................ $200000
</pre>

<hr>

<h2>What I've got (Hack)</h2>
<ul>
    <li><a href="javascript:void(0)">Car</a><i></i><span>$2000</span></li>
    <li><a href="javascript:void(0)">Boat</a><i></i><span>$20000</span></li>
    <li><a href="javascript:void(0)">Airplane</a><i></i><span>$200000</span></li>
</ul>

CSS

hr { margin: 2em 0; }

/* Wrapper */
ul { width: 50%; list-style: none; clear: both; }

/* Container */
li { display: block; position: relative; clear: both; }

/* Floated Elements */
a { position: relative; z-index: 1; background: white; float: left; display: block; padding: .3em; }
span { position: relative;  z-index: 1; background: white; float: right; display: block; padding: .3em; }

/* Dotted Line */
i { position: absolute; top: 15px; left: 0; right: 0; height: 1px; border-bottom: 2px dotted black; display: block; z-index: 0;padding:2px; }