To have them in the same line, I would start by removing <br /> from your code. Then set the css for input and label to be inline-block, something like:
.radioContainer{
width: fit-content;
margin: 5px;
margin-top: 20px;
background-color: aqua;
padding-bottom: 25px;
}
label, input { display: inline-block; }
<div class="radioContainer" style="margin-bottom: 40px; margin-right: 0px; ">
<label class="title" for="">fav food</label>
<label for="burger">burger</label>
<input type="checkbox" id="burger">
<label for="fries">fries</label>
<input type="checkbox" id="fries">
<label for="onionRings">onion rings</label>
<input type="checkbox" id="onionRings">
<label for="cackes">cakes</label>
<input type="checkbox" id="cackes" >
<small></small>
</div>
To make all inputs inline, just remove all the <br /> tags.
Example:
<div class="radioContainer" style="margin-bottom: 40px; margin-right: 0px; ">
<label class="title" for="">fav food</label>
<label for="burger">burger</label>
<input type="checkbox" id="burger">
<label for="fries">fries</label>
<input type="checkbox" id="fries">
<label for="onionRings">onion rings</label>
<input type="checkbox" id="onionRings">
<label for="cackes">cakes</label>
<input type="checkbox" id="cackes">
<small></small>
</div>
Codepen: https://codepen.io/manaskhandelwal1/pen/jOMeqex
I understood your Question that you want them still below each other but aligned to the right side. So i made a solution using flexbox instead of the hard breaks. I commented the Code where i made changes and why, html and css.
Basically i used a colum and put each item-combination (label and checkbox)in a new row-div.
.radioContainer{
width: fit-content;
margin: 5px;
margin-top: 20px;
background-color: aqua;
padding-bottom: 25px;
/*make item a flexbox-container*/
display: flex;
/*combination of flex-direction and flex-wrap*/
flex-flow: column wrap;
}
.row{
/*make item a flexboc container*/
display: flex;
/*flex-flow: row nowrap; this is the default value of flex, which is why you dont need it,
just wanted to leave it in as a comment so you know whats happening*/
/*Align the contents on the end of each row*/
justify-content: flex-end;
}
<div class="radioContainer" style="margin-bottom: 40px; margin-right: 0px; ">
<!--removed the hard breaks and added row-divs around each item combination-->
<div class="row">
<label class="title" for="">fav food</label>
</div>
<div class="row">
<label for="burger">burger</label>
<input type="checkbox" id="burger">
</div>
<div class="row">
<label for="fries">fries</label>
<input type="checkbox" id="fries">
</div>
<div class="row">
<label for="onionRings">onion rings</label>
<input type="checkbox" id="onionRings">
</div>
<div class="row">
<label for="cackes">cakes</label>
<input type="checkbox" id="cackes" >
</div>
<small></small>
</div>
how can I align the labels & inputs to the right
like that all of then appear in the same line
.radioContainer{
width: fit-content;
margin: 5px;
margin-top: 20px;
background-color: aqua;
padding-bottom: 25px;
}
<div class="radioContainer" style="margin-bottom: 40px; margin-right: 0px; ">
<label class="title" for="">fav food</label>
<label for="burger">burger</label>
<input type="checkbox" id="burger">
<br>
<label for="fries">fries</label>
<input type="checkbox" id="fries">
<br>
<label for="onionRings">onion rings</label>
<input type="checkbox" id="onionRings">
<br>
<label for="cackes">cakes</label>
<input type="checkbox" id="cackes" >
<small></small>
</div>
do you mean all elements stay at the same line aligned to right? or you want each (
