Possible to have text flow underneath all radio buttons?

Question

 .recommends-Form-radioGroupContainer { display: flex; flex-wrap: wrap; } 

 <fieldset class="gds-FormField"> <legend class="gds-FormField-label">Your Health</legend> <input name="recommends_insurance_term_life_referral[health_status]" value="" type="hidden"> <div class="gds-FormField-control recommends-Form-radioGroupContainer"> <div> <input id="recommends_insurance_term_life_referral_health_status_excellent" required="required" type="radio" value="excellent" name="recommends_insurance_term_life_referral[health_status]"> <label for="recommends_insurance_term_life_referral_health_status_excellent" class="gds-Button gds-Button--ghost recommends-Form-radioLabel recommends-Form-radioLabel--withHint">Excellent</label> <p class="gds-FormField-help recommends-Form-help" style="text-overflow: unset;">This is a short, jargon-free explanation of "Preferred Plus" without those actual words in it. It should explain the basics, but not too much.</p> </div> <div> <input id="recommends_insurance_term_life_referral_health_status_good" required="required" type="radio" value="good" name="recommends_insurance_term_life_referral[health_status]"> <label for="recommends_insurance_term_life_referral_health_status_good" class="gds-Button gds-Button--ghost recommends-Form-radioLabel recommends-Form-radioLabel--withHint">Good</label> </div> <div> <input id="recommends_insurance_term_life_referral_health_status_fair" required="required" type="radio" value="fair" name="recommends_insurance_term_life_referral[health_status]"> <label for="recommends_insurance_term_life_referral_health_status_fair" class="gds-Button gds-Button--ghost recommends-Form-radioLabel recommends-Form-radioLabel--withHint">Fair</label> </div> <div> <input id="recommends_insurance_term_life_referral_health_status_poor" required="required" type="radio" value="poor" name="recommends_insurance_term_life_referral[health_status]"> <label for="recommends_insurance_term_life_referral_health_status_poor" class="gds-Button gds-Button--ghost recommends-Form-radioLabel recommends-Form-radioLabel--withHint">Poor</label> </div> </div> </fieldset> 

Any thoughts on best approach to get p text (will eventually have a separate p text or tip for each button, which will be shown when that button is selected) to flow underneath all radio buttons?

Also, wanting to have the p remain under the selected button even when the browser is resized and the buttons are stacked (ie not like this)

)

Answer 1

Is this what you're looking for? You could remove, the flex:1; property if you don't want them to be flexible and remove the align-items and justify-content which I just added for alignment.

How is it being aligned?

I've made use of relative and absolute positioning on parent (the outermost div) and child element (p tag) and initally hidden all the <p> tags and when the radio button is checked, the associated sibling <p> with that specific class is shown.

 .recommends-Form-radioGroupContainer{ display:flex; position:relative; } .recommends-Form-radioGroupContainer *{ flex:1; } .recommends-Form-radioGroupContainer .gds-FormField-help{ display:none; padding:5px; border:3px solid lightblue; color:blue; background:rgba(60,60,256,0.1); position:absolute; } input[type="radio"]:checked ~ .gds-FormField-help{ display:block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <fieldset class="gds-FormField"> <legend class="gds-FormField-label">Your Health</legend> <input name="recommends_insurance_term_life_referral[health_status]" value="" type="hidden"> <div class="gds-FormField-control recommends-Form-radioGroupContainer"> <div> <input id="recommends_insurance_term_life_referral_health_status_excellent" required="required" type="radio" value="excellent" name="recommends_insurance_term_life_referral[health_status]"> <label for="recommends_insurance_term_life_referral_health_status_excellent" class="gds-Button gds-Button--ghost recommends-Form-radioLabel recommends-Form-radioLabel--withHint">Excellent</label> <p class="gds-FormField-help recommends-Form-help" style="text-overflow: unset;">This is a short, jargon-free explanation of "Preferred Plus" without those actual words in it. It should explain the basics, but not too much.</p> </div> <div> <input id="recommends_insurance_term_life_referral_health_status_good" required="required" type="radio" value="good" name="recommends_insurance_term_life_referral[health_status]"> <label for="recommends_insurance_term_life_referral_health_status_good" class="gds-Button gds-Button--ghost recommends-Form-radioLabel recommends-Form-radioLabel--withHint">Good</label> <p class="gds-FormField-help recommends-Form-help" style="text-overflow: unset;">Another long message that you will type to check if it works</p> </div> <div> <input id="recommends_insurance_term_life_referral_health_status_fair" required="required" type="radio" value="fair" name="recommends_insurance_term_life_referral[health_status]"> <label for="recommends_insurance_term_life_referral_health_status_fair" class="gds-Button gds-Button--ghost recommends-Form-radioLabel recommends-Form-radioLabel--withHint">Fair</label> <p class="gds-FormField-help recommends-Form-help" style="text-overflow: unset;">And this is also one of them other long messages</p> </div> <div> <input id="recommends_insurance_term_life_referral_health_status_poor" required="required" type="radio" value="poor" name="recommends_insurance_term_life_referral[health_status]"> <label for="recommends_insurance_term_life_referral_health_status_poor" class="gds-Button gds-Button--ghost recommends-Form-radioLabel recommends-Form-radioLabel--withHint">Poor</label> <p class="gds-FormField-help recommends-Form-help" style="text-overflow: unset;">Last long message I promise</p> </div> </div> </fieldset>