Label text is wrapped but not indent second line

I have a form with limited width, however the label text maybe longer than form width, so the text was wrapped to multiple lines. My problem is that first line is indented because of input element but second line is not, it makes the form not nice.

Do you have any idea to make the second, third ... will be indented as first line, only use CSS?

Actual:

enter image description here

My Expectation is

enter image description here

This is my example for the case:

http://jsbin.com/UvaqISO/2/edit

Edit your css like this:

.form {
  width: 300px;
}
label {
  display: block;
  margin-top: -20px;
  margin-left: 20px;
}

Something like this.

.checkbox-field {
    display: flex;
    flex-direction: row;
}

<div class="checkbox-field">
    <input type="checkbox" id="check">
    <label for="check">Field 2 Label, may be longer than normal, This is an example for this lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</label>
</div>

Label text is wrapped but not indent second line

Related

Recent Posts