Align multiple inline radio button groups with labels vertically (Bootstrap 3) - html

Question

I have the following HTML:
<div class="col-sm-6" style="border: 1px solid #ddd; border-radius: 15px;">
<div style="margin: 8px 0 8px 5px;">
<h3>Constitutional</h3>
<div class="row">
<div class="col-sm-6">
<label class="radio-inline">Group 1.1:</label>
<div class="radio radio-info radio-inline">
<input id="ros-wch-na" type="radio" name="ros-wch" value="na" checked />
<label for="ros-wch-na">N/A</label>
</div>
<div class="radio radio-info radio-inline">
<input id="ros-wch-y" type="radio" name="ros-wch" value="y" />
<label for="ros-wch-y">Yes</label>
</div>
<div class="radio radio-info radio-inline">
<input id="ros-wch-n" type="radio" name="ros-wch" value="n" />
<label for="ros-wch-n">No</label>
</div>
</div>
<div class="col-sm-6">
<label class="radio-inline">Group 1.2:</label>
<div class="radio radio-info radio-inline">
<input id="ros-an-na" type="radio" name="ros-an" value="na" checked />
<label for="ros-an-na">N/A</label>
</div>
<div class="radio radio-info radio-inline">
<input id="ros-an-y" type="radio" name="ros-an" value="y" />
<label for="ros-an-y">Yes</label>
</div>
<div class="radio radio-info radio-inline">
<input id="ros-an-n" type="radio" name="ros-an" value="n" />
<label for="ros-an-n">No</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label class="radio-inline">Row2 Group1:</label>
<div class="radio radio-info radio-inline">
<input id="ros-ns-na" type="radio" name="ros-ns" value="na" checked />
<label for="ros-ns-na">N/A</label>
</div>
<div class="radio radio-info radio-inline">
<input id="ros-ns-y" type="radio" name="ros-ns" value="y" />
<label for="ros-ns-y">Yes</label>
</div>
<div class="radio radio-info radio-inline">
<input id="ros-ns-n" type="radio" name="ros-ns" value="n" />
<label for="ros-ns-n">No</label>
</div>
</div>
<div class="col-sm-6">
<label class="radio-inline">Row2 Group2:</label>
<div class="radio radio-info radio-inline">
<input id="ros-hc-na" type="radio" name="ros-hc" value="na" checked />
<label for="ros-hc-na">N/A</label>
</div>
<div class="radio radio-info radio-inline">
<input id="ros-hc-an" type="radio" name="ros-hc" value="y" />
<label for="ros-hc-an">Yes</label>
</div>
<div class="radio radio-info radio-inline">
<input id="ros-hc-an" type="radio" name="ros-hc" value="n" />
<label for="ros-hc-n">No</label>
</div>
</div>
</div>
</div>
</div>
I'm using awesome-bootstrap-checkbox for the radio buttons, so that's why the markup is a bit different and what the radio-* classes are for.
The goal here is to have them all line up vertically and horizontally. Horizontally is not a problem, that works fine. However, labels of different lengths cause the radio button groups to shift, and it becomes uneven, as shown here. The desired effect is to have the radio groups align vertically and look even.
What would the proper CSS/HTML be so that the groups align both horizontally and vertically, no matter the label?

Answer 1

Divide the Label part and Radio-boxes part into two. Have labels with fixed width and wrap the long labels.
<div class="col-sm-6">
<div class='labelsDiv'>
<label class="radio-inline">Group 1.2:</label>
</div>
<div class='radiosDiv'>
<div class="radio radio-info radio-inline">
<input id="ros-an-na" type="radio" name="ros-an" value="na" checked />
<label for="ros-an-na">N/A</label>
</div>
<div class="radio radio-info radio-inline">
<input id="ros-an-y" type="radio" name="ros-an" value="y" />
<label for="ros-an-y">Yes</label>
</div>
<div class="radio radio-info radio-inline">
<input id="ros-an-n" type="radio" name="ros-an" value="n" />
<label for="ros-an-n">No</label>
</div>
</div>
</div>