Fieldset with aligned items using bootstrap not aligned properly - html

Question

I'm working on a wire frame and trying to create the HTML based on it. This is the structure I'll be require to build:
This is what I have done so far but the alignment is not correctly rendered. I have used the two column grid approach and then used the form-inline classes, however the label and text boxes are not getting aligned in one row.:
<style>
.body {
padding: 1px 1px 1px 1px;
}
.column {
float: left;
width: 50%;
}
.customLegend {
border: 1px solid #000;
padding: 2em 0 1em;
margin-top: 2em;
position: relative;
}
.customLegend legend {
border: 0;
background: #fff;
width: auto;
transform: translateY(-50%);
position: absolute;
top: 0;
left: 1em;
padding: 0 .5em;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container body">
<fieldset class="customLegend">
<legend>Sources</legend>
<div class="row">
<!-- Left Section -->
<div class="column">
<div class="form-inline">
<div class="form-inline">
<label>Initial Reporter </label>
<input type="text" class="form-control" />
</div>
<div class="form-inline">
<label class="lbl">First Name </label>
<input type="text" class="form-control" />
</div>
<div class="form-inline">
<label class="lbl">Phone Number </label>
<input type="text" class="form-control" />
</div>
<div class="form-inline">
<label class="lbl">Title </label>
<input type="text" class="form-control" />
</div>
<div class="form-inline">
<label class="lbl">Address </label>
<textarea class="form-control"> </textarea>
</div>
<div class="form-group">
<label class="lbl">Qualification </label>
<select class="form-control">
<option value="0"> </option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
<div class="form-group">
<label class="lbl">Primary Source </label>
<input type="checkbox" class="form-control" />
</div>
<div class="form-group">
<label class="lbl">P I Usage </label>
<select class="form-control">
<option value="0"> </option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
</div>
</div>
<!-- Right Section -->
<div class="column">
<div class="form-inline">
<div class="form-group">
<label class="lbl">Ok to Contact? </label>
<select class="form-control">
<option value="0"> </option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
</div>
<div class="form-group">
<span class="form-inline">
<label>Last Name </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>Email </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>Company </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>Country </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>Zip/Postal </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>City </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>State/Region </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>Phone Number 2 </label>
<input type="text" class="form-control" />
</span>
</div>
<div class="form-group">
<span class="form-inline">
<label>FAX </label>
<input type="text" class="form-control" />
</span>
</div>
</div>
</div>
</div>
</fieldset>
<button class="btn btn-primary">Create New Source</button>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Answer 1

Check the Jsfiddle here
You need to replace the column by col-6 and the hierarchy of the bootstrap divs should change to following
<div class="container">
<div class="row">
<!-- Left Section -->
<div class="col-6">
</div>
<div class="col-6">
</div>
</div>
</div>