CSS - Keep divs in columns aligned

Question

I tried searching for what I was looking for, but I kept on finding things for css on internal divs.

Anyway, what I am trying to do is have two columns of divs be aligned with oneanother, with the right column always being aligned to the top of the left column. This is where I am drawing a blank, I can't seem to figure out how to do that.

The size of the left column is dynamic, so I can't use the :height property to keep things in order.

Here is what I am trying to do:

Answer 1

What you could do is, wrap the inline div within a transparent div. For Example:

<div class="transparent-container">
    <div class="inline-div">
    </div>
    <div class="inline-div">
    </div>
    <div class="clearfix"></div>
</div>

Here is a working JSFiddle

Answer 2

You can do this by three ways:

1. Using a table:

<table>
    <tr>
        <td><div>div</div></td>
        <td><div>div</div></td>
    </tr>
    <tr>
       <td><div>div</div></td>
       <td><div>div</div></td>
    </tr>
</table>

2. Using the container div like below:

<div class="outer-container">
    <div class="box-container">
        <div class="left-box">
            Left Box content
        </div>
        <div class="right-box">
            Right Box Content
        </div>
    </div>
</div>

3. Using JS:

Calcuate the height by Js of left-box and and then pass that to right-box to maintain the gap.