How to start a new line after float:left with different height?

Question

I have this code on jsfiddle.

As you see the 3rd or 4th li item is starting in a new line (depending on your window width). But this new line not started at the beginning of the line because of different heights.

How can I do in CSS the new lines starts always at the beginning of the lines?

<ul>
    <li>
        <div class="imgplace" style="height:200px;">here is an img in real</div>
        <input type="text" id="img_01" value="blahblah" />
        <div class="imgicon">i1</div>
        <div class="imgicon">i2</div>
        <div class="selector">
            <input type="radio"> check me now
        </div>
    </li>
    <li>
        <div class="imgplace" style="height:190px;">here is an img in real</div>
        <input type="text" id="img_02" value="blahblah" />
        <div class="imgicon">i1</div>
        <div class="imgicon">i2</div>
        <div class="selector">
            <input type="radio"> check me now
        </div>
    </li>
    <li>
        <div class="imgplace" style="height:180px;">here is an img in real</div>
        <input type="text" id="img_03" value="blahblah" />
        <div class="imgicon">i1</div>
        <div class="imgicon">i2</div>
        <div class="selector">
            <input type="radio"> check me now
        </div>
    </li>
    <li>
        <div class="imgplace" style="height:200px;">here is an img in real</div>
        <input type="text" id="img_04" value="blahblah" />
        <div class="imgicon">i1</div>
        <div class="imgicon">i2</div>
        <div class="selector">
            <input type="radio"> check me now
        </div>
    </li>
    <li>
        <div class="imgplace" style="height:200px;">here is an img in real</div>
        <input type="text" id="img_05" value="blahblah" />
        <div class="imgicon">i1</div>
        <div class="imgicon">i2</div>
        <div class="selector">
            <input type="radio"> check me now
        </div>
    </li>
    <li>
        <div class="imgplace" style="height: 150px;">here is an img in real</div>
        <input type="text" id="img_01" value="blahblah" />
        <div class="imgicon">i1</div>
        <div class="imgicon">i2</div>
        <div class="selector">
            <input type="radio"> check me now
        </div>
    </li>
</ul>

ul { width: 650px; }
li {
    display: block;
    width: 200px;
    float: left;
    margin: 2px;
}
.imgplace {
    width: 200px;
    background: #f00;
}
.imgicon {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
}
}

Answer 1

Just remove float:left and add display: inline-block and vertical-align: top to align them better(+1 Hashem from comments)

Try

li {
   display: inline-block;
   width: 200px;
   margin: 2px;
   vertical-align: top;
}

DEMO