How can I give proper indentation to the text staring on second line?

Question

This is what i am getting:

I just want padding space between input and the label and also on the second line. I am trying to give padding on the second line.

Below is my code:

   <div class="test">
        <input type="checkbox" id="2question1" name="2question" title="Merknaam 1" /> <label for="2question1">Very long text which is wrapped on the next line</label><br>
       <input type="checkbox" id="2question2" name="2question" title="Merknaam 2" /> 
       <label for="2question2">Merknaam 2</label><br>
       <input type="checkbox" id="2question3" name="2question" title="Merknaam 3" />  <label for="2question3">Merknaam 3</label><br>
       <input type="checkbox" id="2question4" name="2question" title="Merknaam 4" />  <label for="2question4">Merknaam 4</label><br>
    </div>


    .test {
        width:200px;
    }

    .test label {
        display: inline-block;
        padding-left: 1em;
        text-indent: -1em;
    }

Answer 1

Ok, this was not easy at all. They key was adding display: inline-block; to the parent container. Try this:

.test {
  display: inline-block;
  width:200px;
  padding-left: 15px;
}

.test input[type="checkbox"] {
  display: inline-block;
  margin-left: -15px;
}
.test label {
  display: inline;
  text-indent: 1em;
  margin-left: -1.3em;
  padding-left: 1em;
}

<div class="test">
        <input type="checkbox" id="2question1" name="2question" title="Merknaam 1" /> <label for="2question1">Very long text which is wrapped on the next line Very long text which is wrapped on the next line</label><br>
       <input type="checkbox" id="2question2" name="2question" title="Merknaam 2" /> 
       <label for="2question2">Merknaam 2</label><br>
       <input type="checkbox" id="2question3" name="2question" title="Merknaam 3" />  <label for="2question3">Merknaam 3</label><br>
       <input type="checkbox" id="2question4" name="2question" title="Merknaam 4" />  <label for="2question4">Merknaam 4</label><br>
    </div>

You can make some adjustments to the .test{padding-left} and .test input{margin-left} to get the desired result.

Answer 2

Gene Parcellano - See what is the result i am getting now. enter image description here

The text is not getting aligned on the second line.