JSFiddle - React, Tailwind, and code Playground

by Austin Stewart

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<pre>
Make the window narrower, and eventually the radios wrap to two columns, then one.
However, that doesn't happen until much of their text is offscreen on the right.
Also note that the horizontal scrollbar appears before it's actually needed.
Check the 'Apply hacky fix' box, and the only solution I've found gets applied, but it's pretty funky, and doesn't fix the scrollbar.
See commented-out CSS for some other notes.
Better solutions are most welcome!
</pre>

<form id="form">
    <hr>
    <label>Apply hacky fix
        <input type="checkbox" id="cbHack" onclick="document.getElementById('form').className = this.checked ? 'hackyFix' : ''">
    </label>
    <hr>
    <div class="fieldContainer">
        <div class="labelContainer" style="">Favorite Lizard</div>
        <div class="controlContainer">
            <label>
                <input type="radio" value="1" name="r1"> <span class="controlGridText">1 Gecko lorem ipsum</span>

            </label>
            <label>
                <input type="radio" value="2" name="r1"> <span class="controlGridText">2 Dolor sit amet</span>

            </label>
            <label>
                <input type="radio" value="3" name="r1"> <span class="controlGridText">3 Iguana consectetur adipiscing elit </span>

            </label>
            <label>
                <input type="radio" value="4" name="r1"> <span class="controlGridText">4 Chameleon praesent scelerisque massa at placerat elementum curabitur sit amet venenatis ipsum</span>

            </label>
            <label>
                <input type="radio" value="5" name="r1"> <span class="controlGridText">5 Morbi id elit massa</span>

            </label>
            <label>
                <input type="radio" value="6" name="r1"> <span class="controlGridText">6 Maecenas fringilla quis odio id auctor pellentesque laoreet</span>

            </label>
            <label>
...

CSS

body, form, pre {
    font-family: sans-serif;
    font-size: 13px;
    margin: 0;
    padding: 0;
}
.fieldContainer {
    display: block;
    white-space: nowrap;
}
.labelContainer {
    display: inline-block;
    font-weight: bold;
    padding: 2px 4px 2px 0;
    text-align: right;
    vertical-align: top;
    width: 100px;
}
.controlContainer {
    display: inline-block;
    font-weight: normal;
    max-width: 800px;
    padding: 2px;
    text-align: left !important;
    width: calc(100% - 105px);
}
.controlContainer label {
    display: inline-block;
    float: left;
    padding-right: 10px;
    width: 200px;
}
.controlGridText {
    display: inline-block;
    white-space: normal;
}
input {
    float: left;
}
/*.hackyFix .fieldContainer {overflow: hidden;}*/
 .hackyFix .controlContainer {
    left: -100px;
    margin-left: 100px;
    position: relative;
}