How to show multiple radioButtons in two columns - html

Question

I am showing radio buttons dynamically in two columns. As you can see in picture
It looks fine in few conditions but sometimes when text is large it looks off. How can I resolve this issue
Here is some code:
.radiobox-padding-top{
padding-top:15px;
}
input[type=radio] {
float: left;
display: block;
margin-top: 4px;
}
label {
margin-left: 15px;
display: block;
}
here is html code (I am using angular)
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 remove-padding question-row-face">
<div class="col-12" >
<p class="grey-text inlineBlock question-padding">{{data.help_text}}</p>
</div>
<div class="row" style="margin: 0px">
<div class="col-12 radiobox-padding-top">
<div class="form-group">
<span *ngFor="let entry of options; index as i">
<div class="col-5 inlineBlock">
<div class="radio">
<input type="radio" name="{{data.slug}}" checked value="{{options[i]}}">
<label>
{{options[i]}}
</label>
</div>
</div>
</span>
</div>
</div>
</div>
</div>

Answer 1

I have created a running stackblitz.
Modify your code like this:
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 remove-padding question-row-face">
<div class="col-12" >
<p class="grey-text inlineBlock question-padding">{{data.help_text}}</p>
</div>
<div class="row" style="margin: 0px">
<div class="col-12 radiobox-padding-top">
<div class="form-group">
<div class="row">
<div class="col-6" *ngFor="let entry of options; index as i">
<div class="inlineBlock">
<div class="radio">
<input type="radio" name="{{data.slug}}" checked value="{{options[i]}}">
<label>
{{options[i]}}
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Additionally change your CSS like this:
.radiobox-padding-top{
padding-top:15px;
}
input[type=radio] {
float: left;
margin-top: 4px;
}
label {
padding-left: 5px;
margin-left: 15px;
display: block;
}
For more informations about bootstrap breakpoints have a look here.