带弹性包装的Div在最后一个元素的右侧留有空间

Question

我正在尝试实现一个设计，其中三个带有标签的输入使用display flex，一旦它们没有空间，标签应保留在第一行，输入包裹在下面。

主要问题是最后一项应该锚定在右侧，但是一旦输入结束，它将在元素的右侧留出很大的空间。

我尝试了很多事情，但没有任何实际效果。我需要放弃display：flex吗？

这是一个简单的小提琴示例，仅用于显示最后一个输入换行到第二行并在右侧留出较大空间的问题。

https://jsfiddle.net/4zs5fv9d/8/

<div class="parent">
  <div class="child">testsetsetsetset</div>
  <div class="child">tsetsetsetsetsetset</div>
  <div class="child">
    <div class="nightmare">
      <label>Test bal bla bla :</label>
      <input>
    </div>
  </div>
</div>

.parent{
  display: flex;
}

.child{
  display: flex;
  width: 300px;;
}

.child:last-child{
  margin-left: auto;
}

.nightmare{
  display: flex;
  flex-wrap: wrap;
}