JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="leaders">
<li>
<span class="description">Pierwszy element</span>
<span class="destination">2</span>
</li>
<li>
<span class="description">Drugi punkt</span>
<span class="destination">5</span>
</li>
<li>
<span class="description">Trzeci</span>
<span class="destination">6</span>
</li>
</ul>
CSS
ul.leaders {
list-style: none;
margin-top: -0.3em;
}
ul.leaders li {
height: 5.1em;
display: block;
border-bottom: 1px dotted #000;
}
ul.leaders .description,
ul.leaders .destination {
display: block;
margin: 0.3em 0 -0.3em 0;
background: #fff;
}
ul.leaders .description {
float: left;
padding-right: 0.2em;
}
ul.leaders .destination {
float: right;
padding-left: 0.2em;
}
JavaScript
// dot leaders