JSFiddle - React, Tailwind, and code Playground

HTML

<div class=width>
  <div class=item1>
    <span class=text1>
      1 Text text
    </span>
    <span class=price1>
      $100
    </span>
  </div>
  <div class=item1>
    <span class=text1>
      1 Text text text text text text text text text text text text text text text text
    </span>
    <span class=price1>
      $100
    </span>
  </div>
    <br /><br />
  <div class=item2>
    <span class=text2>
      <span class=bg2>
        2 Text text
      </span>
    </span>
    <span class=price2>
      <span class=bg2>
        $100
      </span>
    </span>
  </div>
  <div class=item2>
    <span class=text2>
      <span class=bg2>
        2 Text text text text text text text text text text text text text text text text
      </span>
    </span>
    <span class=price2>
      <span class=bg2>
        $100
      </span>
    </span>
  </div>
  <br /><br />
  <div class=item3>
    <span class=text3>
      3 Text text
    </span>
    <span class=dots3></span>
    <span class=price3>
      $100
    </span>
  </div>
  <div class=item3>
    <span class=text3>
      3 Text text text text text text text text text text text text text text text text
    </span>
    <span class=dots3></span>
    <span class=price3>
      $100
    </span>
  </div>
</div>

CSS

body {
  color: grey;
}

.width {
  width: 300px;
  padding: 5px;
  resize: horizontal;
  overflow: hidden;
  // background: linear-gradient(45deg, yellow, black);
  background-repeat: repeat-x;
  background-size: 200px 100%;
}

.item1 {
  display: flex;
}

.text1 {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
}

.text1::after {
  content: '';
  position: absolute;
  bottom: 0;
  border-bottom: 1px dotted grey;
  width: 100%;
}

.price1 {
  align-self: flex-end;
}

.item2 {
  display: flex;
  justify-content: space-between;
  position: relative;
  mix-blend-mode: darken;
}

.item2::before {
  content: '';
  position: absolute;
  top: 1em;
  left: 0;
  right: 0;
  border-bottom: 1px grey dotted;
}

.bg2 {
  background: white;
  position: relative;
  z-index: 1;
}

.item3 {
  display: flex;
  align-items: flex-start;
}

.dots3 {
  flex-grow: 1;
  border-bottom: 1px dotted grey;
  min-width: 10px;
  height: 1em;
}