How to position two elements in <label> side by side

Question

 <label for="checkbox6">XXXXXX <div style="padding-left: 9.5%;padding-right: 45%;padding-bottom:1.5%"><input class="form-control" name="quantum" type="number" min="1" placeholder="SSSS" required></div> </label>

I want the "SSSS" to be on the right side of the "XXXXXX" text

Answer 1

Issues with your snippet:

• Do not nest your input inside the label.
• Your for attribute does not match the input element's name attribute.

 <div> <label for="myInput">XXXXX</label> <input name="myInput" placeholder="SSSS"/> </div>

Answer 2

Just add display:flex to <label> like so:

label {
  display: flex;
}

Here is the JSFiddle demo

Also note I removed the original padding styles u provided in ur code.

Answer 3

 <div> <label for="checkbox6">XXXXXX</label> <input class="form-control" name="quantum" type="number" min="1" placeholder="SSSS" required> </div>