Align Divs Side By Side in Table Cell

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div class="table-container">
    <table class="table">
        <tr class="row-outline">
            <td style="background: #E6E6E6;">
                Blah Blah Blah...Blah Blah Blah...Blah Blah Blah...Blah Blah Blah...Blah Blah Blah...Blah Blah Blah...Blah Blah Blah...Blah Blah Blah...Blah Blah Blah...Blah Blah Blah...Blah Blah Blah...Blah Blah Blah...Blah Blah Blah...Blah Blah Blah...Blah Blah Blah...Blah Blah Blah...Blah Blah Blah...Blah Blah Blah...
            </td>
            <td style="background: #66FFCC;">
                <div class="left" style=" ">
                    $50
                </div>
                <div class="right">
                    >
                </div>
            </td>
        </tr>
    </table>
</div>

CSS

.table-container {
    width: 300px;
}

.row-outline {
    border: 1px solid black;
}
.left{
    font-size: 2em; 
    line-height: 1.4;
    background: #FFCC66; 
    display:table-cell
}
.right{
    background: #CCFF66;
    display:table-cell; 
    vertical-align:middle
}