Bootstrap, Two columns won't go side by side (Form + Message) - html

Question

I'm trying to make a contact section with two columns, an lg-8 and lg-3 (EDIT) + 1 buffer column:
First Column: Contact Form
Second Column: A simple text message from me.
I've looked around several places and cannot understand what is wrong with my code. I've done everything [bootstrap][1] resource says to and I'm getting one column underneath the other.
This is in a 'div class="container"'
<div class="formattedContact" id="contact">
<h3>Contact Me</h3>
<div class="wrapper">
<div class="content-main">
<form id="contactForm">
<form class="form-item">
<label for="inputName" ></label>
<input type="text" name="name" placeholder="Name" width="100%"></input>
</form>
<form class="form-item">
<label for="inputEmail" ></label>
<input type="text" name="email" placeholder="Email" width="100%"></input>
</form>
<form class="form-item">
<label for="inputPhone" ></label>
<input type="text" name="phone" placeholder="Phone" width="100%"></input>
</form>
<form class="form-item">
<label for="inputMsg" >Message</label><br>
<textarea rows='5' placeholder='Message' > </textarea>
</form>
<button type="submit">Send</button>
</form>
</div>
<div class="content-secondary">
<p>Hullo, Shoot me a text</p>
</div>
</div>
</div>
and the CSS
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}

Answer 1

I made several changes, both to get it to work as you describe and to get the labels linked to the inputs. It is a little redundant to have the placeholders match the labels, but you can do what you want to with that. You can change the 'xs' back to 'lg' in the grid class names, so they will be more appropriate outside of a small snippet. You may find that you want something in between, such as 'sm', (ex 'col-sm-8') since the classes take effect for the size specified between the dashes and larger.
Also, you know that the width numbers at the end of these bootstrap grid system class names are typically supposed to add up to 12, not 11 for a given screen width specifier, right?
#contactForm label {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="formattedContact" id="contact">
<h3>Contact Me</h3>
<div class="wrapper">
<div class="content-main">
<form id="contactForm" class="col-xs-8">
<label for="inputName" >Name</label>
<input type="text" name="inputName" placeholder="Name" width="100%">
<label for="inputEmail" >Email</label>
<input type="text" name="inputEmail" placeholder="Email" width="100%">
<label for="inputPhone" >Phone</label>
<input type="text" name="inputPhone" placeholder="Phone" width="100%">
<label for="inputMsg" >Message</label>
<textarea rows='5' placeholder='Message' name="inputMsg" > </textarea>
<button type="submit">Send</button>
</form>
</div>
<div class="content-secondary col-xs-3">
<p>Hullo, Shoot me a text</p>
</div>
</div>
</div>
</div>

Answer 2

Add the following (Although I would recommend adding an id to these divs and styling )
.content-secondary,.content-main{
display:inline-block;
vertical-align:bottom
}
Snippet below
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
.content-secondary,
.content-main {
display: inline-block;
vertical-align: bottom
}
<div class="formattedContact" id="contact">
<h3>Contact Me</h3>
<div class="wrapper">
<div class="content-main">
<form id="contactForm">
<form class="form-item">
<label for="inputName"></label>
<input type="text" name="name" placeholder="Name" width="100%"></input>
</form>
<form class="form-item">
<label for="inputEmail"></label>
<input type="text" name="email" placeholder="Email" width="100%"></input>
</form>
<form class="form-item">
<label for="inputPhone"></label>
<input type="text" name="phone" placeholder="Phone" width="100%"></input>
</form>
<form class="form-item">
<label for="inputMsg">Message</label>
<br>
<textarea rows='5' placeholder='Message'></textarea>
</form>
<button type="submit">Send</button>
</form>
</div>
<div class="content-secondary">
<p>Hullo, Shoot me a text</p>
</div>
</div>
</div>

Answer 3

Use the built in row and column classes:
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="formattedContact" id="contact">
<h3>Contact Me</h3>
<div class="wrapper">
<div class="content-main">
<form id="contactForm">
<form class="form-item">
<label for="inputName" ></label>
<input type="text" name="name" placeholder="Name" width="100%"></input>
</form>
<form class="form-item">
<label for="inputEmail" ></label>
<input type="text" name="email" placeholder="Email" width="100%"></input>
</form>
<form class="form-item">
<label for="inputPhone" ></label>
<input type="text" name="phone" placeholder="Phone" width="100%"></input>
</form>
<form class="form-item">
<label for="inputMsg" >Message</label><br>
<textarea rows='5' placeholder='Message' > </textarea>
</form>
<button type="submit">Send</button>
</form>
</div>
</div>
<div class="col-sm-3">
<div class="content-secondary">
<p>Hullo, Shoot me a text</p>
</div>
</div>
</div>
</div>

Answer 4

Add float:left to your content-main
.content-main {
.make-lg-column(8);
float:left;
}
https://jsfiddle.net/9Lf16p1c/