Having a text with line breaks, make it's underline width the same as parent's div width

I'm trying to create layout that looks like the paper document with fillable inputs. All the rows with data entered by user should have dotted underline OF THE SAME WIDTH.

The solution below with text-decoration is almost ok, but the dotted lines end when the letters end.

Here's what I need it to look like:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.fillable {
  text-decoration: underline dotted from-font;
  text-underline-position: under;
  word-break: break-word;
  overflow-wrap: break-word;
  vertical-align: top;
  hyphens: auto;
  -webkit-hyphens: auto;
  -webkit-hyphenate-character: '-';
}

<!-- language: lang-html -->

<div style="font-family: times new roman, serif; max-width:250mm">
  <div style="border: 3px solid black;">
    <div style="margin:1px;">

      <div class="fillable" style="min-height:3rem; width:50%; margin-left:0.25rem; display: flex; display: -webkit-box; -webkit-box-align:end;">
        <div style="align-self: flex-end; font-size:1.30rem;">B_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA_B</div>
      </div>

      <div style="width:50%; margin-left:0.25rem; font-size:0.8rem">
        (some text some text some text some text some text)
      </div>
      <div class="fillable" style="min-height:1.5rem; width:57%; margin-left:0.25rem; display: flex; display: -webkit-box;-webkit-box-align:end;">
        <div style="align-self: flex-end; font-size:1.30rem;">B_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA_B</div>
      </div>
    </div>
    <div style="width:57%; margin-left:0.25rem; font-size:0.8rem">
      (some text some text)
    </div>
  </div>
</div>

<!-- end snippet -->

Text decoration doesn't work in the way you are looking for, you will need to found a creative solution

Maybe something like this, it shows the desired beahviour, controlling the line height of the text, and then applying different divs for every line, for this method line-height is everything

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const lineHeight = 16;
const textContainers = document.querySelectorAll(".text-container");
const textContainersLength = textContainers.length;

for (let x = 0; x < textContainersLength; x++) {
  const underlines = textContainers[x].querySelector(".underlines");
  const lines = Math.ceil(textContainers[x].clientHeight / lineHeight);

  const line = document.createElement("div");
  line.style.paddingTop = (lineHeight - 1) + "px";
  line.classList.add("line");
  underlines.innerHTML = ""; // clean
  for (let y = 0; y < lines; y++) {
    underlines.appendChild(line.cloneNode());
  }
}

<!-- language: lang-css -->

.text-container {
  border-right: 1px dotted black;
  width: 300px;
  font-size: 16px;
  line-height: 16px;
  position: relative;
  margin-bottom: 30px;
}

.text {
  position: relative;
  z-index: 2;
}

.underlines {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.line {
  width: 100%;
  border-bottom: 1px dotted black;
}

<!-- language: lang-html -->

<div class="text-container">
  <div class="underlines"></div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
    nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
    anim id est laborum.
  </div>
</div>

<div class="text-container">
  <div class="underlines"></div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
    nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
    anim id est laborum.
  </div>
</div>


<div class="text-container">
  <div class="underlines"></div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
    ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
    nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
    anim id est laborum.
  </div>
</div>

<!-- end snippet -->