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

Question

I am creating a form and I have several input fields on one line.

I would like email input to take up one line. Enter date, time and number in another line. However, I'm not sure how to get date / time / number inputs to cover exactly 100% of the form width.

The percentages that I now have in CSS are estimates, so the edge of the numbers window does not vertically align with the email input field.

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>

Run codeHide result

Answer 1

I would do it with flex, an example works here

I wrapped each line in a div, for example:

<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

<label>, width, padding margin .

:

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>

Hide result

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>

Hide result