a grid of divs with unkown and equal height

Question

i have an unknown number of divs with unknown data in each div (unknown height) these divs have same width say 300px. i need to place them one after another so i get a grid as a result. all divs in each row should have same height so each row would be flat and the whole grid would look good.

my current version does not work. it makes a grid with different heights. im thinking of setting all heights by javascript.

<style>
    .inline {
        width:300px;
        display:inline-block;
        vertical-align:top;
    }
</style>

    <div class="inline">
        Some Text
    </div>
    <div class="inline">
        Some Text
        Some More Text
    </div>
    <div class="inline">
        Some Text
        Some More Text
        Some More Text
    </div>
    <div class="inline">
        Some Text
        Some More Text
        Some More Text
        Some More Text
        Some More Text
    </div>
    <div class="inline">
        Some Text
        Some More Text
    </div>
    <div class="inline">
        Some More Text
        Some More Text
        Some Text
    </div>

Answer 1

Here's a decent strategy for equal-height columns on Position is Everything, and it looks like it will do what you're looking for. If not, then you can find dozens of other techniques with a little help from your favorite search engine.