How to align checkboxes and their labels consistently across browsers

Wrap the checkbox and label in a container

The first step is to wrap the element in a container so we can use it to apply styles to the checkbox and label.

<div class="checkbox-container">
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1">Checkbox Label</label>
</div>

Style checkboxes and labels

Once we have our container, we can use CSS to position, resize, and style the checkboxes and labels.

.checkbox-container {
  display: flex;
  align-items: center;
}
 
.checkbox