html - Make input and label elements appear on same line within columns

Question

I am trying to create a form for our website, and am struggling with trying to get labels to appear to the right of radio buttons. It is instead forcing the labels to appear directly beneath the radio buttons.

HTML

<p>
    <label><strong>Adult Living Arrangements: (18 and over - please check one)</strong></label>
</p>
<p>
    <div class="row">
        <div class="column">
            <input type="radio" class="radiobuttons" id="adult_fostercare" name="livingarrangements" value="Adult Foster Care" tabindex="48" />
            <label>Adult Foster Care</label>
            <input type="radio" class="radiobuttons" id="adult_alone" name="livingarrangements" value="Alone/Independent Living" tabindex="49" />
            <label>Alone/Independent Living</label>
            <input type="radio" class="radiobuttons" id="adult_grouphome" name="livingarrangements" value="Adult Group Home" tabindex="50" />
            <label>Group Home</label>
            <input type="radio" class="radiobuttons" id="adult_homeless" name="livingarrangements" value="Homeless" tabindex="51" />
            <label>Homeless</label>
            <input type="radio" class="radiobuttons" id="adult_nursinghome" name="livingarrangements" value="Nursing Home" tabindex="52" />
            <label>Nursing Home</label>
            <input type="radio" class="radiobuttons" id="adult_other" name="livingarrangements" value="Other" tabindex="53" />
            <label>Other</label>
            <input type="radio" class="radiobuttons" id="adult_otherpublic" name="livingarrangements" value="Other Public/Private" tabindex="54" />
            <label>Other Public/Private</label>
            <input type="radio" class="radiobuttons" id="adult_supportiveliving" name="livingarrangements" value="Supportive Living" tabindex="55" />
            <label>Supportive Living</label>
        </div>
        <div class="column">
            <input type="radio" class="radiobuttons" id="adult_transitional" name="livingarrangements" value="Transitional Facility" tabindex="56" />
            <label>Transitional Facility</label>
            <input type="radio" class="radiobuttons" id="adult_children" name="livingarrangements" value="With Children" tabindex="57" />
            <label>With Children</label>
            <input type="radio" class="radiobuttons" id="adult_family" name="livingarrangements" value="With other Family member" tabindex="58" />
            <label>With other Family member</label>
            <input type="radio" class="radiobuttons" id="adult_parent" name="livingarrangements" value="With Parent" tabindex="59" />
            <label>With Parent</label>
            <input type="radio" class="radiobuttons" id="adult_spouseandchildren" name="livingarrangements" value="With Spouse and Children" tabindex="60" />
            <label>With Spouse and Children</label>
            <input type="radio" class="radiobuttons" id="adult_spouse" name="livingarrangements" value="With Spouse" tabindex="61" />
            <label>With Spouse</label>
            <input type="radio" class="radiobuttons" id="adult_unrelated" name="livingarrangements" value="Unrelated Person" tabindex="62" />
            <label>Unrelated Person</label>
        </div>
    </div>
</p>

CSS

.radiobuttons {
                display: flex;
            }
            .column {
                float: left;
                width: 50%;
            }
            .row:after {
                content: "";
                display: table;
                clear: both;
            }

Any help would be greatly appreciated!

question from:https://stackoverflow.com/questions/66066204/make-input-and-label-elements-appear-on-same-line-within-columns

Answer 1

Possibly you can use a grid like this?

.row {
    display: grid;
  grid-template-columns: auto auto;
}
.column {
  display: grid;
  grid-template-columns: 1.5em auto;
}

Example:

.row {
    display: grid;
  grid-template-columns: auto auto;
}
.column {
  display: grid;
  grid-template-columns: 1.5em auto;
}

<p>
    <label><strong>Adult Living Arrangements: (18 and over - please check one)</strong></label>
</p>
<p>
    <div class="row">
        <div class="column">
            <input type="radio" class="radiobuttons" id="adult_fostercare" name="livingarrangements" value="Adult Foster Care" tabindex="48" />
            <label>Adult Foster Care</label>
            <input type="radio" class="radiobuttons" id="adult_alone" name="livingarrangements" value="Alone/Independent Living" tabindex="49" />
            <label>Alone/Independent Living</label>
            <input type="radio" class="radiobuttons" id="adult_grouphome" name="livingarrangements" value="Adult Group Home" tabindex="50" />
            <label>Group Home</label>
            <input type="radio" class="radiobuttons" id="adult_homeless" name="livingarrangements" value="Homeless" tabindex="51" />
            <label>Homeless</label>
            <input type="radio" class="radiobuttons" id="adult_nursinghome" name="livingarrangements" value="Nursing Home" tabindex="52" />
            <label>Nursing Home</label>
            <input type="radio" class="radiobuttons" id="adult_other" name="livingarrangements" value="Other" tabindex="53" />
            <label>Other</label>
            <input type="radio" class="radiobuttons" id="adult_otherpublic" name="livingarrangements" value="Other Public/Private" tabindex="54" />
            <label>Other Public/Private</label>
            <input type="radio" class="radiobuttons" id="adult_supportiveliving" name="livingarrangements" value="Supportive Living" tabindex="55" />
            <label>Supportive Living</label>
        </div>
        <div class="column">
            <input type="radio" class="radiobuttons" id="adult_transitional" name="livingarrangements" value="Transitional Facility" tabindex="56" />
            <label>Transitional Facility</label>
            <input type="radio" class="radiobuttons" id="adult_children" name="livingarrangements" value="With Children" tabindex="57" />
            <label>With Children</label>
            <input type="radio" class="radiobuttons" id="adult_family" name="livingarrangements" value="With other Family member" tabindex="58" />
            <label>With other Family member</label>
            <input type="radio" class="radiobuttons" id="adult_parent" name="livingarrangements" value="With Parent" tabindex="59" />
            <label>With Parent</label>
            <input type="radio" class="radiobuttons" id="adult_spouseandchildren" name="livingarrangements" value="With Spouse and Children" tabindex="60" />
            <label>With Spouse and Children</label>
            <input type="radio" class="radiobuttons" id="adult_spouse" name="livingarrangements" value="With Spouse" tabindex="61" />
            <label>With Spouse</label>
            <input type="radio" class="radiobuttons" id="adult_unrelated" name="livingarrangements" value="Unrelated Person" tabindex="62" />
            <label>Unrelated Person</label>
        </div>
    </div>