How long label (spread on multiple lines) of the HTML checkbox input can be aligned with the start of the label on the first line?

Question

This checkbox is HTML input of type checkbox. Its picture and HTML is given below.

<div id="div123" style="word-wrap:break-word;">
	<input tabindex="5" enterastab="" type="checkbox" id="chkBx" name="v_108950" value="OPTION_1111111111111"/>
	<label id="lbl123" for="chkBx" unselectable="on">Option 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</label>
</div>

Question: When the labels are too long, how can I make the label printed on next lines start right below the "O" instead of starting from the left side of the checkbox.

Answer 1

You can use Flexbox and set display: flex on parent div element. Also you can add word-break: break-all on label but you also need to add br after first word so that numbers appear under option.

div {
  display: flex; 
  align-items: flex-start;
}
label {
  word-break: break-all; 
}

<div id="div123">
  <input tabindex="5" enterastab="" type="checkbox" id="chkBx" name="v_108950" value="OPTION_1111111111111" />
  <label id="lbl123"  for="chkBx" unselectable="on">Option <br> 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</label>
</div>

Answer 2

You can create a 2-column layout with Flexbox

#div123 {
  /* Create a flexible container with the display property */
  /* A flexible container will create a separate column for each of its children, here a checkbox and a label */
  display: flex;
  
  /* align-items decide how to align the columns vertically */
  /* with flex-start, the checkbox and the label will be align to the top */
  align-items: flex-start;
}

<div id="div123">
  <input type="checkbox" id="chkBx" name="v_108950" value="OPTION_1111111111111" />
  <label id="lbl123" for="chkBx" unselectable="on">Option 11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</label>
</div>