CSS for giving the extra width to the thing in the middle

Today I wanted a form with a label on the left, a button on the right, and an input in the middle, with the input getting all the space. Here is a spell:

.fill-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.get-bigger-in-the-middle {
  flex-grow: 2;
  margin-left: 10px;
  margin-right: 10px;
}
.stay-to-the-left {
  text-align: left;
  flex: 0;
}
.stay-to-the-right {
  flex: 0;
} 

Then in HTML, the parent container is the flex box, and the immediate children are the three items. (They have to be immediate children.)

<div class="fill-container">
  <label class="stay-to-the-left"
         for="email">Email*</label>
  <input class="get-bigger-in-the-middle"
         type="email"
         name="email" />
  <input class="stay-to-the-right"
         type="submit"
         value="Subscribe" />
</div>

Before, I could get it lined up on the right, but not the left.

After, the center input is as wide as it can be:

See also: CSS Tricks on Flexbox
And thanks to Alyson van Hardenberg for the pointers.