Putting a checkbox, label and input box next to each other - html

Question

I am trying to put a checkbox, label and input box next to each other.
I separated it into divs and and put divs side-by-side.
I was able to get the buttons center but they are to close together which I am trying to fix too.
My question is how can I get <div class="col-centered border"> into a smaller border and put a checkbox, label and input box next to each other. In the end I want the buttons and all as a container.
html
<div class="col-centered border">
<form>
<div class="first">
<div class="form-group">
<input type="checkbox" class="form-check-input">
<label for="ssn">SSN:</label>
<input type="text" class="form-control-file" id="ssn" placeholder="Social Security Number">
</div>
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="lastname">Lastname:</label>
<input type="text" class="form-control-file" id="lastname" placeholder="Password">
</div>
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="role">Role:</label>
<input type="text" class="form-control-file" id="role" placeholder="Password">
</div>
</div>
<div class="second">
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="userId">User ID:</label>
<input type="text" class="form-control-file" id="userId" placeholder="User Id">
</div>
<div class="form-group row">
<input type="checkbox" class="form-check-input">
<label for="office">Office</label>
<input type="text" class="form-control-file" id="office" placeholder="Office">
</div>
<input type="checkbox">Include Subordinates
</div>
<div class="center-block lower-button">
<div class="center-block">
<button type="submit" class="btn btn-default btn-md left-button">Search</button>
<button type="submit" class="btn btn-default btn-md right-button">Reset</button>
</div>
</div>
</form>
</div>
css
.first {
width: 100px;
float: left;
padding-left: 450px;
}
.second {
width: 200px;
float: right;
padding-right: 950px;
}
.col-centered{
padding-top: 30px;
float: none;
margin: 0 auto;
}
.btn-beside {
position: center;
left: 100%;
top: 0;
margin-left: -10px;
}
.lower-button{
padding-top:250px;
padding-left:575px;
}
.left-button{
padding-right: -14px;
}
.form-group{
text-align: center;
}
I am using bootstrap

Answer 1

Here's a Fiddle for you to take inspiration from.
HTML
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<span class="input-group-addon">
<label for="tbox">My Label</label>
</span>
<input type="text" id="tbox" class="form-control">
</div>
</div>
</div>
</div>
As per the official documentation for Bootstrap.