可以使用Flexbox布局实现该效果。在父容器中使用display: flex;和flex-wrap: wrap;属性，以便在容器宽度不足时将子元素换行。同时，在每个输入框和标签之间设置一个固定宽度的间距。

HTML代码示例：

  Label 1
  


  Label 2 (optional)
  


  
  Label 3


  
  Label 4 (optional)

CSS代码示例：

.form-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}

.form-group label {
  flex-shrink: 0;
  width: 150px;
  margin-right: 10px;
}

.form-group input {
  flex-grow: 1;
  width: 100%;
  padding: 5px;
  margin-right: 10px;
}

.form-group:last-of-type {
  margin-bottom: 0;
}

在上面的示例中，我们使用了flex-shrink: 0;属性来防止标签收缩到太小的尺寸。我们还使用了flex-grow: 1;属性来让输入框尽可能大，同时固定标签的宽度为150px。最后，我们添加了一个间距属性margin-right: 10px;来在输入框和标签之间添加空隙。

注意：在上述示例中，我们使用了div元素来包装每个输入