Fieldset with aligned items using bootstrap not aligned properly

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">PI 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>