A form and a coloured grid inline with each other - html

Question

I have a contact form that has a width of 45% of the parent div. Instead of white space next to it, I'd like to add a coloured div (a square grid) and add some relevant info within said coloured div. However, with my current code, I'm, unable to get the form and div inline.
I've read some SO posts this one, but they are unable to assist (maybe it's the way I have my current CSS code)
#contact {
width: 90%;
height: 700px;
margin-left: 5%;
background-color: #fff;
border-radius: 10px;
color: #000 !important;
margin: 0 auto;
clear: none;
}
#contact #header {
padding: 10px 0px;
width: 100%;
font-size: 36px;
float: left;
}
#contact-text {
font-size: 16px;
width: 45%;
}
textarea, input, #contact-text {
font-family: Quicksand;
font-size: 16px;
}
label {
display: block;
padding: 1rem 0 .5rem;
text-transform: uppercase;
font-size: 22px;
}
input, textarea {
display: block;
width: 45%;
border: 1px solid black;
padding: .5rem;
}
textarea {
height: auto;
resize: none;
}
button {
font-family: Quicksand;
font-size: 18px;
border: 1px solid black;
padding:.5rem;
width: auto;
text-transform: uppercase;
}
button:hover {
cursor: pointer;
}
#contact #grid {
height: 100%
width: 50%;
background-color: #bbc6cb;
float: right;
overflow: hidden;
display: inline;
}
<div id = "contact">
<div id = "header">
<h3>Contact.</h3>
</div>
<div id = "contact-text">
<p>Please fill out the quick form below and we will get in touch as soon as we can</p>
</div>
<form action="/" id="contact-form" method="post" role="form">
<div class = "label">
<label for="name" class="formText">Name:</label>
</div>
<input id="name" name="name" type="text" placeholder="Your name" required="required">
<div class = "label">
<label for="email" class="formText">Email:</label>
</div>
<input id="email" name="email" type="text" placeholder="Your email" required="required">
<div class = "label">
<label for="message" class="formText">Message:</label>
</div>
<textarea id="message" name="message" placeholder="Enter your message here" rows="10" required="required"></textarea>
<div>
<button type="submit">Send</button>
</div>
</form>
<div id = "grid">
</div>
</div>

Answer 1

Use this below code:
#contact {
height: 700px;
background-color: #fff;
border-radius: 10px;
color: #000 !important;
margin: 0 auto;
clear: none;
max-width: 1140px;
}
.left-gird, .right-grid {
width: 49%;
float: left;
}
.left-gird {
margin-right: 1%;
}
.right-gird {
margin-left: 1%;
}
.color-box {
height: 400px;
background-color: gray;
}
#contact #header {
padding: 10px 0px;
width: 100%;
font-size: 36px;
float: left;
}
#contact-text {
font-size: 16px;
width: 45%;
}
textarea, input, #contact-text {
font-family: Quicksand;
font-size: 16px;
}
label {
display: block;
padding: 1rem 0 .5rem;
text-transform: uppercase;
font-size: 22px;
}
input, textarea {
display: block;
width: 100%;
border: 1px solid black;
padding: .5rem;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
textarea {
height: auto;
resize: none;
}
button {
font-family: Quicksand;
font-size: 18px;
border: 1px solid black;
padding:.5rem;
width: auto;
text-transform: uppercase;
}
button:hover {
cursor: pointer;
}
#contact #grid {
height: 100%;
width: 50%;
background-color: #bbc6cb;
float: right;
overflow: hidden;
display: inline;
}
h3 {
margin-top: 0;
}
<div id = "contact">
<div class="left-gird">
<div id = "header">
<h3>Contact.</h3>
</div>
<div id = "contact-text">
<p>Please fill out the quick form below and we will get in touch as soon as we can</p>
</div>
<form action="/" id="contact-form" method="post" role="form">
<div class = "label">
<label for="name" class="formText">Name:</label>
</div>
<input id="name" name="name" type="text" placeholder="Your name" required="required">
<div class = "label">
<label for="email" class="formText">Email:</label>
</div>
<input id="email" name="email" type="text" placeholder="Your email" required="required">
<div class = "label">
<label for="message" class="formText">Message:</label>
</div>
<textarea id="message" name="message" placeholder="Enter your message here" rows="10" required="required"></textarea>
<div>
<button type="submit">Send</button>
</div>
</form>
</div>
<div class="right-grid">
<div class="color-box"> color box here</div>
</div>
</div>

Answer 2

Use float:left for form and next div for inline
#contact {
width: 90%;
height: 700px;
margin-left: 5%;
background-color: #fff;
border-radius: 10px;
color: #000 !important;
margin: 0 auto;
clear: none;
}
#contact #header {
padding: 10px 0px;
width: 100%;
font-size: 36px;
float: left;
}
#contact-text {
font-size: 16px;
width: 45%;
}
textarea, input, #contact-text {
font-family: Quicksand;
font-size: 16px;
}
label {
display: block;
padding: 1rem 0 .5rem;
text-transform: uppercase;
font-size: 22px;
}
input, textarea {
display: block;
width: 90%;
border: 1px solid black;
padding: .5rem;
}
textarea {
height: auto;
resize: none;
}
button {
font-family: Quicksand;
font-size: 18px;
border: 1px solid black;
padding:.5rem;
width: auto;
text-transform: uppercase;
}
button:hover {
cursor: pointer;
}
form{
float:left;
width:50%;
}
#contact #grid {
height: 100%;
width: 50%;
background-color: #bbc6cb;
float: right;
overflow: hidden;
float:left;
}
<div id = "contact">
<div id = "header">
<h3>Contact.</h3>
</div>
<div id = "contact-text">
<p>Please fill out the quick form below and we will get in touch as soon as we can</p>
</div>
<form action="/" id="contact-form" method="post" role="form">
<div class = "label">
<label for="name" class="formText">Name:</label>
</div>
<input id="name" name="name" type="text" placeholder="Your name" required="required">
<div class = "label">
<label for="email" class="formText">Email:</label>
</div>
<input id="email" name="email" type="text" placeholder="Your email" required="required">
<div class = "label">
<label for="message" class="formText">Message:</label>
</div>
<textarea id="message" name="message" placeholder="Enter your message here" rows="10" required="required"></textarea>
<div>
<button type="submit">Send</button>
</div>
</form>
<div id = "grid">
</div>
</div>