Input field wrapping using flexbox - html

Question

I'm new to the flexbox, and I tried to create an input form like in the picture below.
First, two fields are supposed to be 50% of the width of div, other two are 100% width. In the mobile view, they are supposed to stack on each other.
Can I use "width" and "height" attributes on textarea?
.form{
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: center;
align-items: center;
width: 100%;
}
.input-flex{
max-width: 600px;
}
input, textarea{
border: 0;
border-radius: 6px;
padding: 2%;
background-color: darkgray;
margin-right: 5%;
margin-bottom: 5%;
flex:1 0 100%;
}
<div class="form">
<div class="input-flex">
<input type="text" name="name" placeholder="Name*"/>
<input type="email" name="email" placeholder="E-mail*"/>
<input type="tel" name="number" placeholder="Phone number*"/>
<textarea cols="55" rows="15" placeholder="Questions"></textarea>
</div>
</div>

Answer 1

Please note that you defined .form as the flex parent, even though your elements were inside .input-flex - so I just copied the style to this element.
Regarding your question: by using a dedicated class, you can specify which elements should have 100% width.
Other than that, I changed the margin to be constant all around the elements, so the result better matches the design.
.form {
width: 100%;
}
.input-flex {
max-width: 600px;
display: flex;
flex-wrap: wrap;
text-align: center;
justify-content: center;
align-items: center;
}
input,
textarea {
border: 0;
border-radius: 6px;
padding: 2%;
background-color: darkgray;
margin: 10px;
box-sizing: border-box;
flex-grow: 1;
}
.full-width {
width: 100%;
}
<div class="form">
<div class="input-flex">
<input type="text" name="name" placeholder="Name*" />
<input type="email" name="email" placeholder="E-mail*" />
<input type="tel" class="full-width" name="number" placeholder="Phone number*" />
<textarea cols="55" rows="15" class="full-width" placeholder="Questions"></textarea>
</div>
</div>