Need help to setup two column layout in HTML

Question

Hi I am trying to set up a two column layout in HTML. I am facing problem when the content of the first column grows more than one line. In that case the div which should come below this one is moved to next column because space is available there. here is the link and code for more clarity http://jsfiddle.net/9xp1sj05/1/

<div style="width:47.5%; float:left; display:inline-block">this is column1 with
    <br>a break tag to show it has
    <br>bigger hieght</div>
<div style="width:47.5%; display:inline-block">this is column2</div>
<div style="width:47.5%; float:left; display:inline-block">row2:column1 should come below column1</div>

I can give line-height to column2, but in my case I have to setup the column layout before the actual content in the divs are loaded. So I dont know exactly how much height would column1 take. Is there any way by which I can declare that only one div should come after column1??

Please note that this is just an example, in the real use case, there are more than 10 rows which are loaded dynamically.

Thanks in advance.

Answer 1

Remove float:left and give vertical-align: top; to each div will solved your issue.

style="width:47.5%; display:inline-block; vertical-align: top;"

Check Fiddle Here.

Answer 2

Just add clear:left to the css of the 3rd div:

<div style="width:47.5%; float:left; clear:left; display:inline-block">row2:column1 should come below column1</div>

https://jsfiddle.net/9xp1sj05/2/

Answer 3

Try this code

<div style="width:47.5%; float:left;">this is column1
<br>this is column1
    <br>this is column1
        <br>this is column1
</div>
<div style="width:47.5%; float:left; ">this is column2</div>
<div style="width:47.5%; float:left; clear:both;">row2:column1 should come below column1</div>