Label text is wrapped but not indent second line

Question

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:

My Expectation is

This is my example for the case:

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

Answer 1

Edit your css like this:

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

Answer 2

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>