Aligned wrapping checkbox labels

by Bruno G.

HTML

<div>
  <label>
    <input type="checkbox">
    <span>Some text that can be long and will wrap directly under itself and not under the checkbox.</span>
  </label>
  <label>
    <input type="checkbox">
    <span>Some text that can be long and will wrap directly under itself and not under the checkbox.</span>
  </label>
  <label>
    <input type="checkbox">
    <span>Some text that can be long and will wrap directly under itself and not under the checkbox.</span>
  </label>
</div>

CSS

label {
  display: flex;
  align-items: flex-start;
}
label:not(:last-child) {
  margin-bottom: 10px;
}
input[type="checkbox"] {
  margin-right: 8px; /* Adjust as needed */
}
div {
  width: 350px;
  border: 1px solid green;
  padding: 5px;
}