JSFiddle - React, Tailwind, and code Playground

by klierik

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: #fff;
}

.list {
  & > li {
    position: relative;
    overflow: hidden;

    &:after {
      display: block;
      position: absolute;
      z-index: -1;
      left: 0;
      bottom: 0;
      right: 0;
      
      content: '';
      
      border-bottom: 1px dotted #aaa;
    }
  }

  .title,
  .price {
    background: #fff;
  }

  .title {
    float: left;
  }
  .price {
    float: right;
  }
}