Aligning the text with checkbox

Question

The text that comes to the right of checkbox comes in two lines. When I use the float:right property the text moves below the checkbox and without this property one lines comes to the right of checkbox and rest starts from below the checkbox

Below is the code snippet with float property:

input[type=checkbox] {
  margin-top: 10px;
  margin-right: 10px;
}

label {
  width: auto;
  float: right;
}

<input type="checkbox" name="optIn" value="Y">
<label for="ext-comp-1035">I would like to receive email from you. By checking the box you agree that you have read the Privacy Policy and Terms of Use</label><br>

score 1 · Accepted Answer · answered Jul 18 '19 at 07:00

Wrap your input & label one container apply flex

<div style="display:flex">
    <input type="checkbox" name="optIn" value="Y" style="margin-right:10px;">
    <label for="ext-comp-1035">I would like to receive email from you. By checking the box you agree that you have read the Privacy Policy and Terms of Use</label>
    </div>

score 1 · Answer 2 · answered Jul 18 '19 at 07:03

Try using display: flex; and align-items: center; to get your alignment done easily. Example code :

.d-flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.align-items-center {
  align-items: center;
}

.input-checkbox {
  margin-right: 10px;
}

<div class="d-flex flex-row align-items-center">
<input type="checkbox" name="optIn" value="Y" class="input-checkbox">
<label for="ext-comp-1035">I would like to receive email from you. By checking the box you agree that you have read the Privacy Policy and Terms of Use</label><br>
</div>

Aligning the text with checkbox

2 Answers2