Problems with making "fill-in-the-blanks" paragraph

Question

Some Context

I placed five inline-block inputs inside a div like so:

<!-- HTML -->
<input oninput="adjustWidthInput(this, 'w3-input w3-border-bottom dark dark-border-light');" class="w3-input w3-border-bottom dark dark-border-light" style="display: inline-block; outline: none; width: 0px;" />
<input oninput="adjustWidthInput(this, 'w3-input w3-border-bottom dark dark-border-light');" class="w3-input w3-border-bottom dark dark-border-lighter" style="display: inline-block; outline: none; width: 0px;" />
<input oninput="adjustWidthInput(this, 'w3-input w3-border-bottom dark dark-border-light');" class="w3-input w3-border-bottom dark dark-border-light" style="display: inline-block; outline: none; width: 0px;" />
<input oninput="adjustWidthInput(this, 'w3-input w3-border-bottom dark dark-border-light');" class="w3-input w3-border-bottom dark dark-border-lighter" style="display: inline-block; outline: none; width: 0px;" />
<input oninput="adjustWidthInput(this, 'w3-input w3-border-bottom dark dark-border-light');" class="w3-input w3-border-bottom dark dark-border-light" style="display: inline-block; outline: none; width: 0px;" />

---

// JS
function adjustWidthInput(ei, cl) {
    var t=document.createElement("span");
    t.className=(cl||ei.className)+" tmp-iw-obtain";
    t.style.display="inline";
    t.innerHTML=ei.value.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    document.body.appendChild(t);
    var w=t.getBoundingClientRect().width;
    document.body.removeChild(t);
    ei.style.width=w+"px";
}

The inputs will grow as I type in them, but I cannot press enter to make a new line (intended).

The Problem

If I fill one of these elements with text, and it overflows, I expect it to occur like this: These rules are followed in the expectation:

• When elements are too wide, they break into two or more lines.
• Two elements should always be next to each other (their ends meet), unless one of their ends is on the edge of the div. (The next element has no space to be able to touch the first, and will thus be moved to the next line.)

But in "reality" this occurs:

This has problems:

• The fifth input separates into a new line in expectation, but it goes outside the div in the result. (first & second photo)
• If an input is too wide but still has space to overflow, it moves down the div, leaving a wide blank space above it. (first photo)

I have tried turning it into a span:

<span contenteditable class="w3-input w3-border-bottom dark dark-border-light" style="outline: none;"></span>
<span contenteditable class="w3-input w3-border-bottom dark dark-border-lighter" style="outline: none;"></span>
<span contenteditable class="w3-input w3-border-bottom dark dark-border-light" style="outline: none;"></span>
<span contenteditable class="w3-input w3-border-bottom dark dark-border-lighter" style="outline: none;"></span>
<span contenteditable class="w3-input w3-border-bottom dark dark-border-light" style="outline: none;"></span>

The result:

This solves problems:

• Text goes outside the div.

But this adds problems:

• The inputs are unnecessarily wide
• I can press enter to register a new line

And I still don't have what I expect. I'm trying to make a fill-in-the-blanks paragraph (like in the expectation), where some parts are filled, but others are left blank for you to fill.

---

I don't want to have to create new elements and calculate their widths (which i did to make the expectation photo, very tiring process) to create an illusion that my expectation is followed. The user might resize the screen only to realize the problem is back, and I might change my stylesheet anytime. I would appreciate any help or answers to this problem. (If possible, please don't use jQuery; the application is offline and jQuery takes up space.)

Answer 1

EDIT: As kmoser pointed out, You can make <span> elements contenteditable, as below.

div {
  max-width: 600px;
  padding: 12px;
  border: 1px solid black;
}

span {
  line-height: 1.75;
}

span:nth-child(even) {
  border-bottom: 2px solid black;
}

span:nth-child(odd) {
  border-bottom: 2px solid red;
}

<body>
  <div>
    <span contenteditable>Nitrogen</span>
    <span contenteditable>is a tasty treat for</span>
    <span contenteditable>plants</span>
    <span contenteditable>of all ages. In fact, one might consider it the tastiest treat of them all. Certainly tastier than</span>
    <span contenteditable>phosphorus</span>
    <span contenteditable>at least.</span>
  </div>
</body>