I’m trying to get my three input fields to extend across the container its made using flexbox
.contact-form{
max-width: 550px;
margin: 0 auto;
background:#011627ff;
padding: 30px;
border-radius: 5px;
display: flex;
box-shadow: 0 0 10px #011627ff;
}
.input-fields{
display: flex;
flex-direction: column;
margin-right: 4%;
}
.input-fields textarea{
width: 48%
}
.input-fields .input textarea{
margin: 10px 0;
background:transparent;
border: 0;
border-bottom: 2px solid;
padding: 10px;
width: 100%
background-color:#011627ff;
}
textarea{
height: 212px;
margin-top: 10px;
}
.input-button{
margin-left : 200px;
margin-top: 400px;
}
label{
color: white;
}
<form class="contact-form">
<div class="input-fields">
<label for="name">Full Name</label>
<input type="text" name="name" required="name" placeholder="Enter Your Name" class="input" >
<label for="email">Email</label>
<input type="email" name="email" required="email" placeholder="Enter An Email" class="input">
<label for="number">Phone Number</label>
<input type="number" name="number" required="number"
placeholder="Enter Your Phone Number"
class="input">
<textarea placeholder="additional comments">Additional Comments</textarea>
</div>
<div>
<input type="submit" value="submit" class="input-button">
</div>
</form>
