How to enforce `input text` to take 100% width of its parent (`div class="input-wrapper"`), which is responsive? `Width:inherit` make it wide for whole `viewport` and `width:auto` doesn't work as well, because it makes input default `size="20"`. I want to have two containers with `width` in `px` and central container with input responsive. Take a look at my simple plunker.

HTML:

```
<div class="one"></div>
<div class="three"></div>
<div class="two">
  <div class="input-wrapper">
    <input type="text" id="square" />
  </div>
</div>

```

CSS:

```
input {
  width: auto;
}

.one {
  width: 200px;
  background-color: blue;
  height: 60px;
  float: left;
}

.two {
  background-color: red;
  height: 60px;
  width: auto;
}

.three {
  background-color: yellow;
  height: 60px;
  width: 150px;
  float: right;
}

.input-wrapper {
  width: 100%;
  background-color: green;
}

```

<http://plnkr.co/edit/wtaXo3N4j4hKyeWI0l5i?p=preview>