html - how can I align the labels & inputs to the right

Question

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>

Answer 1

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>