<form>
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">
Personal Information
</div>
<div class="panel-body">
<div class="form-group form-group-inline">
<label class="label-block">First Name</Label>
<input class="form-control form-control-inline form-control-medium" placeholder="First Name" />
</div>
<div class="form-group form-group-inline">
<label class="label-block">MI</Label>
<input class="form-control form-control-inline form-control-small" placeholder="MI" />
</div>
<div class="form-group form-group-inline">
<label class="label-block">Last Name</label>
<input class="form-control form-control-inline" placeholder="Last Name" />
</div>
<div class="form-group">
<label class="label-block">Address</label>
<input class="form-control form-control-inline form-control-large" />
<input class="form-control form-control-large" />
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">
Payment Information
</div>
<div class="panel-body">
</div>
</div>
</div>
</form>
.form-group-inline {
display: inline-block;
}
.form-control-inline {
min-width: 0;
width: auto;
display: inline;
margin-left: 5px;
}
.form-control-small {
min-width: 40px;
max-width: 50px;
}
.form-control-medium {
min-width: 200px;
max-width: 250px;
}
.form-control-large {
min-width: 400px;
max-width: 500px;
}
.label-block {
display: block;
margin-left: 5px;
}