I have a table that represents a monthly calendar. In each cell, I want the date to appear as a number in the top left. In the bottom right, I want a button that has a "+" to allow a user to add content to that day. I have this working when the cells are all the same height, but it breaks down when content stretches the height of a row to different sizes.

JSFiddle: <http://jsfiddle.net/FLVh6/>

Sample table layout:

```
<table>
<tr>
    <td>
        <div>1</div>
        <div>Content goes here</div>
        <div><input type="button" value="+" /></div>
    </td>
    <td>
        <div>2</div>
        <div>Content goes here</div>
        <div><input type="button" value="+" /></div>
    </td>
</tr>
<tr>
    <td>
        <div>3</div>
        <div>Content goes here</div>
        <div><input type="button" value="+" /></div>
    </td>
    <td>
        <div>4</div>
        <div>Content goes here.  The problem starts when there's a lot of content and the row gets stretched, the button should be in the bottom right in the other cell.</div>
        <div><input type="button" value="+" /></div>
    </td>
</tr>
<table>

```

And sample CSS for where I've gotten so far:

```
table {
    border-collapse:collapse;
    width: 300px;
}

td {
    padding: 5px;
    border: 1px solid black;
    width:50%;
    vertical-align:top;
}

td div:first-of-type {
    font-size:large;
    font-weight:bold;
    float:left;
}

td div:not(:first-of-type) {
    clear:left;
}

td div:last-of-type {
    float:right;
}

```