Here is the HTML code snippet:
<div id="container">
<div id="signals-summary-parameters-radio">
<fieldset>
<legend>Row Filter : </legend>
<label for="signals-summary-radio-all">All</label>
<input type="radio" name="radio" id="signals-summary-radio-all">
<label for="signals-summary-radio-active">Active</label>
<input type="radio" name="radio" id="signals-summary-radio-active">
<label for="signals-summary-radio-new">New</label>
<input type="radio" name="radio" id="signals-summary-radio-new">
</fieldset>
</div>
</div>
<div id="container-2">
<div id="signals-summary-parameters-radio-2">
<fieldset>
<legend>Row Filter : </legend>
<label for="signals-summary-radio-all-2">All</label>
<input type="radio" name="radio" id="signals-summary-radio-all-2">
<label for="signals-summary-radio-active-2">Active</label>
<input type="radio" name="radio" id="signals-summary-radio-active-2">
<label for="signals-summary-radio-new-2">New</label>
<input type="radio" name="radio" id="signals-summary-radio-new-2">
</fieldset>
</div>
</div>
The JavaScript code:
$(function() {
$("#signals-summary-parameters-radio input").checkboxradio();
$("#signals-summary-parameters-radio-2 input").checkboxradio();
});
And lastly, the CSS code:
#container {
display: grid;
grid-template-rows: minmax(30px);
grid-template-columns: repeat(10, 1fr);
}
I have created a JSFiddle with all the code here.
In my real-world webpage, using the CSS display:grid causes the radio buttons to stack on top of each other rather than side by side. How can I adjust my CSS to make the radio buttons align horizontally like in the container-2 div?