Expand total width of form boxes on one line to 100% - html

Question

I'm creating a form and I have several input boxes on the same line.
I'd like to have the email input to take one line. The date, time, and number inputs to take another line. However, I'm not sure how to get the date/time/number inputs to span exactly 100% of the width of the form.
The percentages I have now in the CSS are estimates, so the edge of the number box doesn't vertically align with the email input box.
input[type=email] {
width: 100%;
}
input[type=date] {
width: 22%;
margin-right: 15px;
}
input[type=time] {
margin-right: 15px;
}
input[type=number] {
width: 11.4%
}
<form>
Email: <input type="email"><br>
Date: <input type="date">
Time: <input type="time">
Number in Party: <input type="number">
</form>

Answer 1

I would do it using flex, Here's a working example
I wrapped each line on a div, like this:
<form>
<div>Email: <input type="email"></div>
<div>
<div>Date: <input type="date"></div>
<div>Time: <input type="time"></div>
<div>Number in Party: <input type="number"></div>
</div>
</form>
css
form{
display: flex;
flex-direction: column;
}
form>div{
display: flex;
}
form>div input{
flex-grow: 1;
}
form>div>div{
display: flex;
flex-grow: 1;
}

Answer 2

You can use <label> to give yourself some explicit control the width, padding & margin of the form field labels.
Example:
label, input {
display: inline-block;
height: 24px;
line-height: 24px;
}
label {
width: 18%;
margin: 6px 0;
padding: 3px 0 3px 3px;
background-color: rgb(227,227,227);
}
input {
width: 80%;
}
input:nth-of-type(n+2) {
width: 13%;
}
<form>
<label for="email">Email:</label><input type="email" name="email" id="email"><br />
<label for="date">Date:</label><input type="date" name="date" id="date">
<label for="time">Time:</label><input type="time" name="time" id="time">
<label for="number">Number in Party:</label><input type="number" name="number" id="number">
</form>

Answer 3

input[type=email] {
width: 100%;
}
input[type=date] {
width: 21%;
}
input[type=time] {
width: 21%;
margin-right:42px;
}
input[type=number] {
width: 20.9%;
}
<form>
Email: <input type="email"><br><br>
Date : <input type="date">
Time : <input type="time">
Number in Party : <input type="number">
</form>