Make a div get to the top of another div

Question

I'm making a template, and I'd like to have a div that his height gets to the top of another div. A screenshot that explains it a bit:

This is my CSS:

.grid_1 { width:60px; }
.grid_2 { width:140px; }
.grid_3 { width:220px; }
.grid_4 { width:300px; }
.grid_5 { width:380px; }
.grid_6 { width:460px; }
.grid_7 { width:540px; }
.grid_8 { width:620px; }
.grid_9 { width:700px; }

.column {
    margin: 0 10px;
    overflow: hidden;
    float: left;
    display: inline;
}
.row {
    width: 720px;
    margin: 0 auto;
    overflow: hidden;
}
.row .row {
    margin: 0 -10px;
    width: auto;
    display: inline-block;
}

And HTML:

<div class="row">
    <div class="column grid_9"><p><img src="img/bomb.gif" style=" margin-bottom: 10px; padding-right: 5px; padding-left: 5px; padding-bottom: 5px; padding-top: 5px;">
</p></div>
</div>

<div class="row">
    <div class="column grid_3"><p style="line-height: 222px;">TEST</p></div>

    <div class="column grid_6"><p>post</p></div>
    <div class="column grid_6"><p>post</p></div>
    <div class="column grid_6"><p>post</p></div>



</div>
        <div class="row">
            <div class="column grid_3"><p>footer</p></div>
            <div class="column grid_3"><p>footer</p></div>
            <div class="column grid_3"><p>footer</p></div>

    </div>

jsFiddle link

Answer 1

This answer was originally by Eric:

jsFiddle working