CSS dot leaders at first line over complex background

HTML

<div class=item1>
  <span class=text1>
    Text
  </span>
  <span class=line1></span>
  <span class=price1>
    $100
  </span>
</div>
<div class=item1>
  <span class=text1>
    Text text text text text text text text text text text text
  </span>
   <span class=line1></span>
  <span class=price1>
    $100
  </span>
</div>
<div class=item1>
  <span class=text1>
    Text text text text text text text text text text text text
  </span>
</div>

CSS

.item1 {
  display: flex;
}
.line1 {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
}
.line1::after {
  content: '';
  position: absolute;
  bottom: 0;
  border-bottom: 1px dotted grey;
  width: 100%;
}
.price1 {
  align-self: flex-end;
}