Three spans in a div, right most span take all width - html

Question

I'd like to have a form with 3 <input>s and one textarea below. All of them are inside a container. The 2 first <input>s have min and max width and a % the 3rd input has min and % but no max width.
I would like that when I make the window big enough so that the 1st and 2nd reach their max width, the 3rd one grows to 100% instead of staying limited to 45% and the rest staying in spaces.
HTML:
.container{
width: 70%;
margin: 0px auto;
padding: 10px;
}
.form{
text-align: center;
}
#text{
margin-top: 5px;
width: 95%;
}
#iName{
width: 15%;
min-width: 45px;
max-width: 70px;
}
#iDate{
width: 30%;
min-width: 120px;
max-width: 150px;
}
#iTitle{
width: 45%;
min-width: 120px;
}
<div id="container" class="container">
<div id="form" class="form">
<input id="iDate" value="28/03/2017 13:19"></input>
<input id="iName" value="Jhon"></input>
<input id="iTitle" value="My title"></input><br>
<textarea id="text" rows="4" cols="50">
Some Text
</textarea><br>
<button id="update">Update</button>
</div>
...
</div>

Answer 1

This is a great case scenario to use flexbox.
https://jsfiddle.net/2nfo8exr/
As you can see, you can still set the min-width and max-width restrictions, but it will make sure to use all of the remaining space on that 3rd input to fill up the width.
Also please notice input tags are self-closed and you don't need </input> as that's not valid HTML.

Answer 2

Perhaps this solves the problem (if I understand the problem correctly).
#iTitle {
/*
where 95% is the width of textarea
where 150px + 70px is the max width of the other inputs
where -12px is the space (4px * 3) in between div elements
*/
width: calc(95% - (150px + 70px) - 12px);
min-width: 120px;
}

Answer 3

Here the pure code you can use it without any addition
HTML
<div id="container" class="container">
<div class="row">
<div id="form" class="form">
<input id="iDate" value="28/03/2017 13:19">
<input id="iName" value="Jhon">
<input id="iTitle" value="My title"><br>
<textarea id="text" rows="4">ASfadfasbncaksjb</textarea>
<br />
<button id="update">Update</button>
</div>
CSS
.container {
width: 70%;
margin:0 auto;
}
.form {
text-align: center;
}
#text {
margin-top: 5px;
width: 98%;
}
#iName {
width: 15%;
}
#iDate {
width: 40%;
}
#iTitle {
width: 40%;
}