inline-block 只是不主动消费剩余水平空间了，本身没有「利用尽可能少的空间」的义务。你的第二个 <form> 里都是行内元素，依规则各自在水平轴上找位置，能不换行就不换行（因为你没限制父容器的宽度，width: auto 不算限制）。于是第二个 <form> 就被其中的元素一步步吃满整个 container 的宽度（没再继续变宽是因为 container 明确了宽度）。
<input> 元素不自动缩小宽度的原因跟 Inline-block 类似（没有那个义务）。以及空 <input> 有自己的默认宽度（大约 20 个字符宽）。综合算下来第二个 <form> 就把另外两个 <form> 挤到单独的行上了。
想实现你预期的效果有 3 个办法：
1. 明确相关元素的宽度（需要结合 container 宽度进行计算，需要注意 container 的宽度是不固定的）
2. 让第二个 <form> 里的元素垂直排列（ display 也行，各自套到 <div> 里也行）
3. 用 Flexbox （推荐这么做，如果你不需要兼容旧版 IE 的话）