Full border length for span element regardless of text in span element

Issue

I have this simple html:

.line {
  width: 100%;
  border-bottom: 1px solid rgb(101, 101, 101);
}

<div>
  <span class="line">atque quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitiaatque quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitiaatque quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitia</span>
</div>

What I currently have is this:

But what I'd like is the border to cover the entire length of each line regardless of the text. Something like this:

(Treat the 3 red squiggly lines as 3 straight black lines haha)

EDIT 1

From the answer provided. I see a double line here..

Solution

If you want to use span, you need to separate it like this:

.line {
  width: 100%;
  display: block;
  border-bottom: 1px solid rgb(101, 101, 101);
}

<div>
  <span class="line">atque quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitiaatque</span><span class="line"> quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitiaatque quae</span><span class="line"> quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitia</span>
</div>

But if your willing to use <p> tags you can do it like this:

.line {
  line-height: 20px;
  color: #333;
  background-image: 
repeating-linear-gradient(180deg, transparent, transparent 19px, #333 20px);
}

<div>
  <p class="line">atque quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitiaatque quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitiaatque quae quam? Molestias officiis voluptatum distinctio laborum iste temporibus culpa mollitia</p>
</div>

Answered By - Rei