Css - How to Make the Checkbox and Label in One Line

How to force a checkbox and text on the same line?

It wont break if you wrap each item in a div. Check out my fiddle with the link below. I made the width of the fieldset 125px and made each item 50px wide. You'll see the label and checkbox remain side by side on a new line and don't break.

<fieldset>
<div class="item">
    <input type="checkbox" id="a">
    <label for="a">a</label>
</div>
<div class="item">
   <input type="checkbox" id="b">
<!-- depending on width, a linebreak can occur here. -->
    <label for="b">bgf bh fhg fdg hg dg gfh dfgh</label>
</div>
<div class="item">
    <input type="checkbox" id="c">
    <label for="c">c</label>
</div>
</fieldset>

http://jsfiddle.net/t5dwp7pg/1/

How to align a Checkbox and Text on the same line in HTML?

You might set the display of the label to block. That means it will occupy the whole line for himself. The default display of label tag is inline. You can read about block level and inline tags here.

So you must set the display of your label tag to inline so the check box could come next to the text.

.first {
  display: block
}

.second {
  display: inline
}

<label class="first">Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto modi earum laudantium quod facilis ullam eaque reprehenderit, hic autem deserunt dolor ratione animi. Dolor, voluptate!</label>
<input type="checkbox"><br/><br/>

<label class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto modi earum laudantium quod facilis ullam eaque reprehenderit, hic autem deserunt dolor ratione animi. Dolor, voluptate!</label>
<input type="checkbox">

Keep checkbox and label on same line (html)

Update the CSS to

input[type="checkbox"] {
  /*display:none;*/
}
input[type="checkbox"] + label span{
  display:inline-block;  /*SET TO DISPLAY INLINE BLOCK*/
  width:36px;
  height:36px;
  margin:-1px 4px 0 0;
  vertical-align:middle;
  background:url(components_switches_check3.png) bottom no-repeat;
}

Output
enter image description here

How to make input (checkboxes) and label line up?

.list {
 display: table-row 
}

You can use .list to target the class of your div

.list {display: table-row}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="list">  <input type="checkbox">  <label> value1</label>  <input type="checkbox">  <label> value2</label>  <input type="checkbox">  <label> value3</label>  <input type="checkbox">  <label> value4</label></div>

How to set all checkboxes and its labels on left side one after another line?

Just as @StefanBob mentioned, the checkboxes aren't aligned to the left side of the form because you have width: 100% declared on all of the <input> elements. I see you want to keep 100% width for the name/email/age fields, so you can just add width: auto to the checkbox <input>'s by using .checkboxes input { width: auto } in your stylesheet.

If you want it to mimic the look of the checkboxes included in your image, you can add an explicit width on the checkbox inputs like width: 4ch. Lastly, to make your form responsive, you can remove the 18rem left and right margins on .form-container and replace it with margin: 0 auto. This way the left/right margins are auto calculated by the viewport. To achieve the same width for the form you had with the left/right 18rem margins, just utilize max-width. Now your form is responsive and viewable for all viewport widths.

.form-container {
  background: rgba(27, 27, 50, 0.8);
  margin: 0 auto;
  max-width: 65ch; /* max width of form */
  padding: 2em;
  text-align: left;
  border-radius: 5px;
}

.checkboxes {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.checkboxes input {
  /* width: auto; */
  width: 4ch; /* define an explicit width */
  margin-bottom: 0;
  margin-left: 0;
  margin-right: .25rem; /* controls the space between checkbox and text */
}

body {
    background: linear-gradient(rgba(68, 28, 179, 0.753), rgba(68, 28, 179, 0.753)), url(./survey-form-background.jpeg) no-repeat center center fixed, rgba(68, 28, 179, 0.753);; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
.container {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    font-family: 'Poppins', sans-serif;
}
.headings {
    color: white;
    text-align: center;
}
.form-container {
    background: rgba(27, 27, 50, 0.8);
    margin: 0 auto;
    max-width: 65ch; /* max width of form */
    padding: 2em;
    text-align: left;
    border-radius: 5px;
}
label {
    color: white;
    display: flex;
    font-size: 1.125rem;
    margin-bottom: 10px;
}
input {
    width: 100%;
    height: 1.5rem;
    padding: 0.375rem 0.01rem;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    margin-bottom: 30px;
}
select {
    width: 100%;
    height: 2.4rem;
    padding: 0.375rem 0.01rem;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    margin-bottom: 30px;
}
.checkboxes {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.checkboxes input {
  /*width: auto;*/
  width: 4ch; /* define an explicit width */
  margin-bottom: 0;
  margin-left: 0;
  margin-right: .4rem; /* controls the space between checkbox and text */
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project 05</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="headings">
            <h1 >freeCodeCamp Survey Form</h1>
            <h3><em>Thank you for taking the time to help us improve the platform</em></h3>
        </div>
        <div class="form-container">
            <label for="">Name</label>
            <input type="text" required>
            <label for="">Email</label>
            <input type="email" required>
            <label for="">Age (optional)</label>
            <input type="number" required>
            <label for="">Which option best describes your current role?</label>
            <select name="" id="">
                <option disabled> Select an option</option>
                <option class="container" value="challenges">Challenges</option>
                <option class="container" value="projects">Projects</option>
                <option class="container" value="community">Community</option>
                <option class="container" value="opensource">Opensource</option>
            </select>
            <label for="">What is your favorite feature of freeCodeCamp?</label>
            <label class="checkboxes"><input type="checkbox"> One</label>
            <label class="checkboxes"><input type="checkbox"> Two</label>
            <label class="checkboxes"><input type="checkbox"> Three</label>
        </div>
    </div>
</body>
</html>

How to align my checkboxes separate lines?

Hi and welcome to stackoverflow.
It's great that you add link to a fiddle but you MUST add the relevant code here also.

As for your question, quick way to solve it is to wrap labels with element (form?) and style this element as flexbox (you can even delete you existing style):

form {display: flex; flex-flow: column; /* remove this if you want it horizontal   */ }

<div class="form-group">
          <p>Which superpower would you like to have? 
          <span class="clue">(Check all that apply)</span></p>
          <form>
          
          <label>
            <input 
              name="superpower"
              type="checkbox"
              value="mind-read"
              class="input-checkbox"
            >Mind Reading
          </label>
          <label>
            <input 
              name="superpower"
              type="checkbox"
              value="invisibility"
              class="input-checkbox"
            >Invisibility
          </label>
          <label>
            <input 
              name="superpower"
              type="checkbox"
              value="teleportation"
              class="input-checkbox"
            >Teleportation
          </label>
          <label>
            <input 
              name="superpower"
              type="checkbox"
              value="Flying"
              class="input-checkbox"
            >Flying
          </label>
          <label>
            <input 
              name="superpower"
              type="checkbox"
              value="have-superpower"
              class="input-checkbox"
            >I have already a superpower
          </label>
          </form>
        </div>