Bootstrap CSS - How to get control label with inline radios below it - css

Question

In my form I have two cols with the label on top and a full width input. My problem is that I now have two fields requiring radios. I want to split the col into 2 and have the two labels with their two radios below. I can get that ok but the alignment is then not right on the next field down.
You can see it here in this bootply http://www.bootply.com/VlFHq0daui
Leased property and mesne rate units. The key codes below it is not aligning correctly.
<form>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="address_line1" class="control-label">Address 1</label>
<input type="text" class="form-control" id="address_line1">
</div>
<div class="form-group">
<label for="address_line1" class="control-label">Address 2</label>
<input type="text" class="form-control" id="address_line2">
</div>
<div class="form-group">
<label for="town" class="control-label">Town*</label>
<input type="text" class="form-control" id="town">
</div>
<div class="form-group">
<label for="county" class="control-label">County</label>
<input type="text" class="form-control" id="county">
</div>
<div class="form-group">
<label for="eircode" class="control-label">Eircode</label>
<input type="text" class="form-control" id="eircode">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="reference" class="control-label">Reference</label>
<input type="text" class="form-control" id="reference">
</div>
<div class="form-group">
<label for="tax_reference" class="control-label">Tax Reference</label>
<input type="text" class="form-control" id="tax_reference">
</div>
<div class="form-group">
<label for="local_authority" class="control-label">Local Authority</label>
<select name="local_authority" id="local_authority" class="form-control">
<option>Select...</option>
<option value="41">Ahtlone Town Council</option>
<option value="88">Youghal Town Council</option>
</select>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-6">
<label for="leased_property" class="control-label">Leased Property?</label>
<br>
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="YES"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="NO"> No
</label>
</div>
<div class="col-lg-6">
<label for="mesne_rates_unit" class="control-label">Mesne Rates Unit?</label>
<br>
<label class="radio-inline">
<input type="radio" name="mesne_rates_unit" id="mesne_rates_unit" value="YES"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="mesne_rates_unit" id="mesne_rates_unit" value="NO"> No
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="key_code" class="control-label">Key Code</label>
<input type="text" class="form-control" id="key_code">
</div>
<div class="form-group">
<label for="gprn_number" class="control-label">GPRN Number</label>
<input type="text" class="form-control" id="gprn_number">
</div>
<div class="form-group">
<label for="mprn_number" class="control-label">MPRN Number</label>
<input type="text" class="form-control" id="mprn_number">
</div>
</div>
</div>
</form>

Answer 1

You can warp radios inputs inside a div with same height of input box:
<div class="radios">
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="YES"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="NO"> No
</label>
</div>
CSS:
.radios{
height: 34px;
padding: 5px;
}
Bootply

Answer 2

Add this to your CSS.
.form-group {
min-height:59px;
}

Answer 3

After some trying I found a solution, its not perfect, but will solve the issue.
You could wrap your radio elements into a row and hardcode the needed margins to align the buttons the way you want. For this I gave the row a custom class align-radios.
HTML:
<div class="row align-radios">
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="YES"> Yes
</label>
<label class="radio-inline">
<input type="radio" name="leased_property" id="leased_property" value="NO"> No
</label>
</div>
CSS:
.align-radios {
margin: 7px 0 7px 5px;
}
Hope this helps you a bit.