While working on a wire frame, I am attempting to create the HTML structure based on it. The required structure that needs to be built is outlined in this diagram: https://i.sstatic.net/ypp2f.png
Progress has been made on aligning elements using a two-column grid approach and form-inline classes, but proper alignment hasn't been achieved yet. Despite the effort, the label and text boxes are not lining up 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>
... (and so on)