How to Place Two Input Fields Side-by-Side - html

Question

I've been trying to place two input fields side-by-side for sometime now and and I can't get them to actually get inline. Here's my HTML:
<div class="container">
<div class="form-group name1 col-md-6">
<label for="exampleInputEmail1" class="formText">FIRST NAME:*</label>
<input type="text" class="form-control" id="name" aria-describedby="emailHelp" name="muverName">
</div>
<div class="form-group name2 col-md-6">
<label for="exampleInputEmail1" class="formText">LAST NAME:*</label>
<input type="text" class="form-control" id="name" aria-describedby="emailHelp" name="muverPhone">
</div>
</div>
I'm trying to utilize Bootstrap as well, but I can't for the life of me get them to align side-by-side. Here's the corresponding CSS:
.name1 {
float: left;
}
.name2 {
float: right;
}
#name {
width: 223.67px;
height: 40.25px;
}
.form-group {
margin-left: 5%;
margin-right: 5%;
}
.containerr {
display: inline-block;
}
This is my output:
Whats the best way to place them side-by-side?

Answer 1

Bootstrap should do this for you. Looks like you're missing the <div class="row"> around your columns:
<div class="container">
<div class="row">
<div class="form-group name1 col-md-6">
<label for="exampleInputEmail1" class="formText">FIRST NAME:*</label>
<input type="text" class="form-control" id="name" aria-describedby="emailHelp" name="muverName">
</div>
<div class="form-group name2 col-md-6">
<label for="exampleInputEmail1## Heading ##" class="formText">LAST NAME:*</label>
<input type="text" class="form-control" id="name" aria-describedby="emailHelp" name="muverPhone">
</div>
</div>
</div>

Answer 2

Judging by the size of your output, you might need to use different column sizes. Try to set col-sm-6 or col-xs-6 classes. col-md-6 might be to large in your case.

Answer 3

#name {
width: 223.67px;
height: 40.25px;
}
.form-group {
display: inline-block;
width: calc(50% - 1px);
padding: 0 !important;
}
.container {
display: inline-block;
width: 90%;
margin-left: 5% !important;
margin-right: 5% !important;
}
.form-control {
margin: 0 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="form-group name1 col-md-6">
<label for="exampleInputEmail1" class="formText">FIRST NAME:*</label>
<input type="text" class="form-control" id="name" aria-describedby="emailHelp" name="muverName">
</div>
<div class="form-group name2 col-md-6">
<label for="exampleInputEmail1" class="formText">LAST NAME:*</label>
<input type="text" class="form-control" id="name" aria-describedby="emailHelp" name="muverPhone">
</div>
</div>
The above should work on larger resolutions.