Why are two inputs within an inline-block element twice as long as one input?

Question

Say I have this code:

div {
  display: inline-block;
}

input {
  width: 100%;
}

section {
  margin-block: 20px;
}

<section>
  <div>
    <input/>
    <input/>
  </div>
</section>

<section>
  <div>
    <input/>
  </div>
</section>

The first section is about twice as long as the first one, but why? I'm trying to understand why this is happening. The same thing happens if instead of inputs I put inline-block DIVs.

Answer 1

^{NB - I think this is a dupe... if I find one I'll delete this answer and close the question, but for now, I'm providing you with an answer.}

Normally, divs are block elements, and inputs are inline elements, and so they take up, depending on the browser size, somewhere around 140px in length. Two inline elements would thus normally sit side by side in a div, and that div would span the whole length of its container. See the border for an illustration of what I mean:

section {
    margin-block: 20px;
}

div {
    border: 1px solid red; /* for illustration purposes */
}

<section>
    <div>
        <input>
        <input>
    </div>
</section>
<section>
    <div>
        <input>
   </div>
</section>

However, you've set the div to be inline-block, which changes how things display, naturally:

section {
    margin-block: 20px;
}

div {
    display: inline-block;
    border: 1px solid red; /* for illustration purposes */
}

<section>
    <div>
        <input>
        <input>
    </div>
</section>
<section>
    <div>
        <input>
   </div>
</section>

Now, the second thing you've done which completes the picture is you've set your input elements to take up 100% of the width of the container. Only it's not doing what you expect it to do... because the inputs are inline elements and the containing div is inline-block, the containing div is going to maintain the size it would for both of the inputs side-by-side.

You can see an illustration of it retaining its size here, even when the inputs are set to width: 25% each (with some HTML whitespace removed to make it more clear the inputs are taking up exactly 50% of the horizontal space):

section {
    margin-block: 20px;
}

div {
    display: inline-block;
    border: 1px solid red; /* for illustration purposes */
}

input {
    width: 25%;
}

<section>
    <div>
        <input><!-- this comment is just here to remove the inherent whitespace between the two inputs
     --><input>
    </div>
</section>
<section>
    <div>
        <input>
   </div>
</section>

And what happens when you have inline content that overflows the width? It wraps to the next line, and the height of the element increases to fit the new line:

section {
    margin-block: 20px;
}

div {
    display: inline-block;
    border: 1px solid red; /* for illustration purposes */
}

input {
    width: 100%;
}

<section>
    <div>
        <input>
        <input>
    </div>
</section>
<section>
    <div>
        <input>
   </div>
</section>