JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list">
  <li><span class="title">Jacket</span><span class="price">Etiam</span></li>
  <li><span class="title">Quam</span><span class="price">Aenean</span></li>
  <li><span class="title">Porta</span><span class="price">Vulputate</span></li>
</ul>

SCSS

body {
  padding: 15%;
  background: repeating-linear-gradient(-45deg, #ccc, #ccc 10px, #fff 10px, #fff 20px);
}

.list {
  & > li {
    display: flex;

    &:after {
      content: '';
      order: 1;
      flex: 1;
      border-bottom: 1px dotted #aaa;
    }
  }

  .price {
    order: 2;
  }
}