Hey there, I'm currently working on a product calculator and need to create 9 input fields organized in 3 rows of three columns. However, when I try to use display: flex and flex-direction: row on the parent div, it doesn't seem to be working as expected. All the input fields end up in a single column and input sizing is not applying properly.
Any ideas on what might be causing this issue?
Thank you!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.survery-questions {
display: flex;
flex-direction: row;
}
.home-price-footer {
width: 25%;
height: 45px;
margin-bottom: 3em;
}
#input {
background: #ffffff;
border: 1px solid #eaeaea;
}<html>
<head>
</head>
<body>
<div class="survery-questions">
<form action="">
<div class="price-form">
<input name="price-1" type="text" placeholder="price 1" class="home-price-footer" id="input" required>
</div>
<div class="phone-form">
<input name="price-2" type="text" placeholder="price 2" class="home-price-footer" id="input" required>
</div>
<div class="email-form">
<input type="price-3" placeholder="price 3" class="home-price-footer" id="input" required>
</div>
<div class="price-form">
<input name="price-4" type="text" placeholder="price 4" class="home-price-footer" id="input" required>
</div>
<div class="phone-form">
<input name="price-5" type="text" placeholder="price 5" class="home-price-footer" id="input" required>
</div>
<div class="email-form">
<input type="price-6" placeholder="price 6" class="home-price-footer" id="input" required>
</div>
<div class="price-form">
<input name="price-7" type="text" placeholder="price 7" class="home-price-footer" id="input" required>
</div>
<div class="phone-form">
<input name="price-8" type="text" placeholder="price 8" class="home-price-footer" id="input" required>
</div>
<div class="email-form">
<input type="price-9" placeholder="price 9" class="home-price-footer" id="input" required>
</div>
</form>
</div>
</form>
</div>
</body>
</html>