As I work on creating a mock survey form, I've organized the input fields in a column flex-box layout. However, I'm facing an issue with the name field where I want to split it between 'first' and 'last' names while sharing their horizontal space. I attempted enclosing them in a div with a flex property set to row, but it appears that the parent flexbox is overriding this configuration, keeping them stacked vertically. How can I align the name input fields side by side?
<html>
<header>
Survey Form
</header>
<body>
<div class='container'>
<div class='form'>
<div class='inputCon'>
<div class='name'>Name</div>
<div class='firstLast'>
<input
type='text'
name='FirstName'
id='firstname'
placeholder='Enter your name'
required>
</div>
<input
type='text'
name='LastName'
id='lastname'
placeholder='Enter your name'
required>
</div>
</div>
<div class='inputCon'>
<div class='email'>Email</div>
<input
type='text'
name='email'
id='email'
placeholder='Enter your email address'
required>
</div>
<div class='inputCon'>
<div class='email'>Email</div>
<input
type='text'
name='email'
id='email'
placeholder='Enter your email address'
required>
</div>
</div>
</body>
</html>
<style>
html {
background-color: gray;
}
.container {
margin: 10px auto 10px auto;
height: 300px;
width: 350px;
display: flex;
flex-direction: column;
}
body {
background-image: linear-gradient(
115deg,
rgba(58, 58, 158, 0.8),
rgba(136, 136, 206, 0.7)),
url(https://images.unsplash.com/photo-1541233349642-6e425fe6190e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
#name{
width: 100%;
}
.inputCon{
display: flex;
flex-direction: column;
text-align: center;
margin: 20 120 20 0;
width: 100%;
}
.firstLast {
display: flex;
flex-direction: row;
}
input{
width: 100%;
text-align: center;
}
</style>