Aligning Checkbox to the right

Question

I am trying to align the checkbox so that its at the right of recurring but its not working. I have tried the inspect the elements and tried different ways but still i cant get it to go to the right.

<div class="container">
  <div class="row center">
    <p>Recurring:</p>
    <form action="#">
        <input type="checkbox" id="check1">
        <label for="check1"></label>
    </form>
  </div>
</div>

Answer 1

Give your p element and the form element the property display:inline-block;.

Both the p and form elements have the display:block; property by default.

p{
  display:inline-block;  
}
form{
  display:inline-block;  
}

<div class="container">
  <div class="row center">
    <p>Recurring:</p>
    <form action="#">
        <input type="checkbox" id="check1">
        <label for="check1"></label>
    </form>
  </div>
</div>

Answer 2

Or you can add your "Recurring" text to the label like this

<div class="container">
  <div class="row center">
    <form action="#">
        <label for="check1">Recurring</label>
        <input type="checkbox" id="check1">
    </form>
  </div>
</div>

Answer 3

Use inline-block divs to align the elements inline:

https://jsfiddle.net/Bendrick92/0o6mwdtz/

.left, .right {
  display: inline-block;
}

<div class="container">
  <div class="row center">
    <div class="left">
      <p>Recurring:</p>
    </div>
    <div class="right">
      <form action="#">
          <input type="checkbox" id="check1">
          <label for="check1"></label>
      </form>
    </div>
  </div>
</div>