I'm attempting to align a radio button, dropdown, and checkbox on the same line where the second radio button is displayed. I'm utilizing Bootstrap 4, but I'm open to plain HTML that doesn't necessarily follow Bootstrap styling.
I tried using display:inline or display:inline-block with a div surrounding the second radio group, but the checkbox stubbornly remains in the line below rather than inline.
Desired layout:
Line 1: Radio button (Popular)
Line 2: Radio button (Order), Dropdown, Checkbox
Current layout:
Line 1: Radio button (Popular)
Line 2: Radio button (Order), Dropdown
Line 3: Checkbox
See code snippet below:
<div class="form-check">
<label class="form-check-label">
<input style="height:1em; width:1em;" type="radio" class="form-check-input" value="popular" name="abc" checked>Popular
</label>
</div>
<div class="form-check">
<div style="display:inline-block;">
<label class="form-check-label">
<input style="height:1em; width:1em;" type="radio" class="form-check-input" value="order" name="abc" checked>Order
</label>
<select id="user_tag_dropdown">
<option>One</option>
<option>Two</option>
</select>
<div class="checkbox">
<label>
<input type="checkbox"> All
</label>
</div>
</div>
</div>