Bootstrap - Layout of Radio Buttons - css

Question

I have a webpage that uses Bootstrap 3. In this page, I have some radio buttons. Some of them have short labels. Some have longer labels. I'd like to format my radio buttons so that they render like this:
+------------------------------------------------------+
| o Choice 1 |
| |
| o Choice 2. This is a longer label that should |
| wrap. Notice how the wrap does not happen under |
| the radio button. Rather the text is justified |
| |
| o Choice 3 |
+------------------------------------------------------+
In an attempt to do this, I decided to use display:inline-block;, but that's not working. I'd really like to use inline-flex. However, I can't use that because of my target browsers. So, I tried mimicing this functionality using straight HTML. I've created that in this Bootply. Yet, the wrapping behavior is still incorrect. My HTML looks like this:
<div class="container">
<div id="myChoices">
<label class="choice">
<input id="SelectedStation" name="SelectedStation" type="radio" value="1">
<span class="outer"><span class="inner"></span></span>
<p>ABC</p>
</label>
<br>
<label class="choice">
<input id="SelectedStation" name="SelectedStation" type="radio" value="2">
<span class="outer"><span class="inner"></span></span>
<p>CBS</p></label>
<br>
<label class="choice">
<input id="SelectedStation" name="SelectedStation" type="radio" value="3">
<span class="outer"><span class="inner"></span></span>
<p> This is a longer label that should wrap. Notice how the wrap does not happen under the radio button. Rather the text is justified</p>
</label>
<br>
<label class="choice">
<input id="SelectedStation" name="SelectedStation" type="radio" value="4">
<span class="outer"><span class="inner"></span></span>
<p>NBC</p>
</label>
<br>
</div>
</div>
What did I do wrong? Why is a) the label appearing on the line below the radio button and b) why isn't the text wrapping inline with the label?
Thank you

Answer 1

Firstly, you can't use the same id more than once in a single page; so use a .SelectedStation class instead.
Secondly, you can use relative positioning on .choice, absolute positioning on .SelectedStation and apply some left padding to your <p>s.
.choice {
position: relative;
display: block;
}
.SelectedStation {
position: absolute;
top: 0;
left: 0;
}
.choice p {
padding-left: 22px;
}
<div class="container">
<div id="myChoices">
<label class="choice">
<input class="SelectedStation" name="SelectedStation" type="radio" value="1">
<span class="outer"><span class="inner"></span></span>
<p>ABC</p>
</label>
<br>
<label class="choice">
<input class="SelectedStation" name="SelectedStation" type="radio" value="2">
<span class="outer"><span class="inner"></span></span>
<p>CBS</p>
</label>
<br>
<label class="choice">
<input class="SelectedStation" name="SelectedStation" type="radio" value="3">
<span class="outer"><span class="inner"></span></span>
<p>This is a longer label that should wrap. Notice how the wrap does not happen under the radio button. Rather the text is justified</p>
</label>
<br>
<label class="choice">
<input class="SelectedStation" name="SelectedStation" type="radio" value="4">
<span class="outer"><span class="inner"></span></span>
<p>NBC</p>
</label>
<br>
</div>
</div>

Answer 2

#myChoices p {
display: inline-block;
}
p tag is block element, now we changed to inline-block,
as you are using bootstrap, you can use following classes to fix the wrap issue
add col-xs-12 class to #myChoices div tag
add col-xs-2 class to all span.outer tags
add col-xs-10 class to p tag, if p tag is not possible wrap p tag in div
Example codepen