How to get a table-cell aligned to the right?

Question

I have a table with two rows.
Looks something like this:

—————————————————
|   1   |   2   |
|———————————————|
|   3   |       |
—————————————————

The first row has two cells, but the second has only one.

How can I get the only table-cell in the second row, to align under the the second table-cell in the first row? (without adding a cell before the cell in the second row)
Like this:

—————————————————
|   1   |   2   |
|———————————————|
|       |   3   |
—————————————————

Here's my HTML:

<div class="table">
    <div class="row">
        <div class="cell one">
            1
        </div>
        <div class="cell two">
            2
        </div>
    </div>
    <div class="row">
        <div class="cell three">
            3
        </div>
    </div>
 </div>

And my CSS:

div.table {
    display:table;
    background:#EEE;
    padding:10px;
}
 div.row {
    display:table-row;
    background:#610;
    padding:10px;
    width:100%;
    text-align:right;
}
 div.cell {
    display:table-cell;
    background:#016;
    padding:10px;
    color:white;
    font-family:sans-serif;
}

jsFiddle.

I've tried margins & floats. I would like to avoid absolute and floats if possible though.

Answer 1

If the only reason you don't want an extra cell because you don't have control of the HTML, you could do this:

.row + .row:before {
    content: '';
    display:table-cell;
    background-color:white;
}

http://jsfiddle.net/7H7rf/6/

Answer 2

i dont know what are you exactly trying to acheive but try this one

.three
{
position:relative!important;
left:100%!important;
display:inline-block!important;
}

http://jsfiddle.net/7H7rf/4/

well you can just rename the class to .right_cell

Answer 3

Why not just add an empty cell? There is nothing wrong with this. See this question

jsFiddle example

HTML

<div class="table">
    <div class="row">
        <div class="cell one">
            1
        </div>
        <div class="cell two">
            2
        </div>
    </div>
    <div class="row">
        <div class="cell three"></div>
        <div class="cell three">
            3
        </div>
    </div>
</div>

Then use the following CSS to make the background of an empty cell gray:

div.cell:empty {
    background:#EEE;
}