How i can display a column inline of other columns - html

Question

i have issue with my design in contact form i am trying to represent my contact form like following picture: https://cdn.discordapp.com/attachments/772606698283073557/951615088966631505/unknown.png
But my columns display vertically and i want the textarea (Message) to be inline with input Subject, could you help me please? 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;
}

Answer 1

You need to encapsulate the columns inside a row
...
<div class="row">
<div class="col-md-6">
...
</div>
<div class="col-md-6">
...
</div>
<div class="col-md-12">
...
</div>
</div>
...
You can check the example below, please note that I have removed the md from the columns classes because the preview is less than the medium screen breakpoint
.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;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<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="row">
<div class="col-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-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-12 text-center mt-5">
<div class="contact-btn text-center">
<input type="sumbit" class="btn" value="Sent Message">
</div>
</div>
</div>
</form>
</div>
</div>
</section>