Flex, Form input element overflowed - html

Question

Hi there I am creating a form for my webpage. I am trying to implement it using flex so it can adjust to the window size. My problem is that the input box for the lastName overflows. Any pointers how I can fix this so that the last name input box and the label drops to a new line or if its possible to squeeze both in. If you could help that would be greatly appreciated! Here so pics of whats going on and the code will be below that.
form before resizing :
form after resizing :
The code:
#survey {
border: 1px solid black;
padding: 15px;
display: flex;
flex-flow: column nowrap;
}
div#names {
display: flex;
flex-flow: row nowrap;
flex: 1 1 auto;
}
div.formRow {
flex: 1 1 auto;
display: -webkit-flex;
display: flex;
flex-flow: column nowrap;
}
div.formRow>* {
flex: 1 1 auto;
}
div.horizontalRow {
display: -webkit-flex;
display: flex;
flex-flow: column nowrap;
}
div.horizontalRow>* {
flex: 1 1 auto;
}
<form id="survey" action="url" method="post">
<label>Name*</label>
<br>
<div id="names">
<div class="formRow">
<input type="text" name="firstname">
<label for="firstname">First Name</label>
</div>
<div class="formRow">
<input type="text" name="lastname">
<label for="lastname">LastName</label>
</div>
</div>
<div class="horizontalRow">
<label for="email">Email Address *</label>
<input type="email" name="email">
</div>
<div class="horizontalRow">
<label for="subject">Subject *</label>
<input type="text" name="subject">
</div>
<div class="horizontalRow">
<label for="message">Message *</label>
<input type="text" name="message">
</div>
<br>
<div id="submitDiv">
<input id="submit" type="submit" value="Submit">
</div>
</form>

Answer 1

You may use media query to change behavior under 400px (or any other value you want) so each input will be in a seperate line instead of having them both in the same line.
It's also better for UX/UI than having two small inputs in one line :
#media all and (max-width:400px) {
div#names {
flex-flow: column nowrap;
}
div.formRow>input {
order:1; /*Put the label on top to behave like other fields*/
}
}
Full code :
#survey {
border: 1px solid black;
padding: 15px;
display: flex;
flex-flow: column nowrap;
}
div#names {
display: flex;
flex-flow: row nowrap;
flex: 1 1 auto;
}
div.formRow {
flex: 1 1 auto;
display: -webkit-flex;
display: flex;
flex-flow: column nowrap;
}
div.formRow>* {
flex: 1 1 auto;
}
div.horizontalRow {
display: -webkit-flex;
display: flex;
flex-flow: column nowrap;
}
div.horizontalRow>* {
flex: 1 1 auto;
}
#media all and (max-width:400px) {
div#names {
flex-flow: column nowrap;
}
div.formRow>input {
order:1;
}
}
<form id="survey" action="url" method="post">
<label>Name*</label>
<br>
<div id="names">
<div class="formRow">
<input type="text" name="firstname">
<label for="firstname">First Name</label>
</div>
<div class="formRow">
<input type="text" name="lastname">
<label for="lastname">LastName</label>
</div>
</div>
<div class="horizontalRow">
<label for="email">Email Address *</label>
<input type="email" name="email">
</div>
<div class="horizontalRow">
<label for="subject">Subject *</label>
<input type="text" name="subject">
</div>
<div class="horizontalRow">
<label for="message">Message *</label>
<input type="text" name="message">
</div>
<br>
<div id="submitDiv">
<input id="submit" type="submit" value="Submit">
</div>
</form>