CSS: Canh Input Giữa Hai Text Động(Make Input In Dynamic Text)

Vấn đề canh một input text ở giữa hai label động và input text kia phải chiếm hết phần không gian nó có thể có.
Vd: Ta có một input text ỏ giữa hai label mà kích thước text của label có thể thay đổi, nhưng mà input text của ta thì luôn chiếm chiều dài còn lại của hai label, ta xem hình sau.

1. Ta giải quyết nó như sau
HTML

<div class="parent">
  <label class="lb-first">First label</label>
  <label class="lb-second">Second label</label>
  <div class="wrapper-input">
    <input type="text" />  
  </div>
  <div class="clearfix"></div>
</div>

CSS

.parent {
  background: yellow;
}
.lb-first {
  float: left;
}
.wrapper-input {
  overflow: hidden;
  display: block;
  padding: 0px 10px;
}
input {
  width: 100%;
}
.lb-second {
  float: right;
}
.clearfix {
  clear: both;
}