I'm having an issue with the design of my contact form. I want it to look like the picture at this link: here
However, my columns are displaying vertically and I would like the textarea (Message) to be inline with the input for Subject. Can someone please help me with this? Thank you!
My HTML:
<section class="contact-form">
<div class="container">
<div class="formRow row">
<div class="titleSection text-center">
<h2 class="contact_text text-center">Contact Us</h2>
</div>
<form action="">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Subject" required>
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email" required>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Name" required>
</div>
</div>
<div class="col-md-6 m-0">
<div class="form-group">
<textarea name="text" id="" class="form-control" cols="74" rows="3" placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12 text-center mt-5">
<div class="contact-btn text-center">
<input type="sumbit" class="btn" value="Sent Message">
</div>
</div>
</form>
</div>
</div>
</section>
My css:
/***********************************************
For Contact Section
************************************************/
.contact-form {
padding: 56px 0 60px;
}
.formRow{
display: block;
flex-wrap: nowrap;
margin-right: -15px;
margin-left: -15px;
}
.contact_text{
color: #990000;
font-size: 40px;
font-weight: 700;
}
.titleSection{
margin-bottom: 30px;
}
.contact-form .form-group .form-control {
border-radius: 0;
padding: 20px;
background: transparent;
border-color: black;
min-height: 70px;
font-size: 16px;
width: 100%;
color: black;
}
.contact-form .form-group textarea {
height: 240px;
}
.btn{
letter-spacing: 0.1em;
cursor: pointer;
font-size: 14px;
font-weight: 400;
padding: 0px 0px;
line-height: 45px;
max-width: 160px;
position: relative;
text-decoration: none;
text-transform: uppercase;
width: 100%;
color:#fff;
background-color: #990000;
}