Make the dynamic width of elements inside flexbox

Question

Well, I am not good at flex because I don't use it much, but I think there is no other way to do this. I want to make a simple form that will have a shortcut with a description and entries on the right side. This description can be of any size and input to increase its size in order to fulfill the parent. Here is the code:

div {
    display: flex;
    width: 300px;
    margin-bottom: 20px;
    border: 1px solid red;
}
label {
    height: 21px;
    line-height: 21px;
    font-size: 14px;
    color: black;
    flex: 1;
}
input {
    margin-left: 20px;
    flex: 1;
}

<div>
    <label>Company</label>
    <input type="text">
</div>
<div>
    <label>Street</label>
    <input type="text">
</div>
<div>
    <label>Who are you?</label>
    <input type="text">
</div>

Run codeHide result

It should look like this:

Answer 1

You only need to set the flex label: property flex: 0 1 auto. This means flex-grow: 0,flex-shrink: 1 flex-basis: auto

div {
    display: flex;
    width: 300px;
    margin-bottom: 20px;
    border: 1px solid red;
}
label {
    height: 21px;
    line-height: 21px;
    font-size: 14px;
    color: black;
    flex: 0 1 auto;
}
input {
    margin-left: 20px;
    flex: 1;
}

<div>
    <label>Company</label>
    <input type="text">
</div>
<div>
    <label>Street</label>
    <input type="text">
</div>
<div>
    <label>Who are you?</label>
    <input type="text">
</div>

Run codeHide result

Answer 2

flex-order . http://codepen.io/tantata/pen/KNoMWQ

div {
    display: flex;
    width: 300px;
    margin-bottom: 20px;
    border: 1px solid red;
    flex-wrap:nowrap;
}
label {
    height: 21px;
    line-height: 21px;
    font-size: 14px;
    color: black;
    flex-grow: 0;
}
input {
    margin-left: 20px;
    flex-grow: 1;
}

<div>
    <label>Company</label>
    <input type="text">
</div>
<div>
    <label>Street</label>
    <input type="text">
</div>
<div>
    <label>Who are you?</label>
    <input type="text">
</div>

Hide result