div content table cell settings - html

Question

Please find below fiddle what i tried
http://jsfiddle.net/9LdEc/
code:
html:
<div id="CorpDealerSearch">
<div class="row">
<div class="left">
Quarter To Date
</div>
<div class="left">
914
</div>
<div class="left">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAZCAYAAACM9limAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACoSURBVFhH7dkhDoMwFIfxJ5EcieNwG5IZJJY7IDhCBTeYm0JCgviTEJaxAUnfbL8mdVVffn0VNTMT+7KBifVdYIdCmF8YhLm5KoQhjG+KIgYxiPEVQIyvFzMGMdI4ztuOWUmJaZpBef5QllUqilZl2SmE12WnpMK8C0zTor5/qq4DYWKuz/FMkmJiIhGGVynGyecMYhCDGF8BxPh6MWMQ86cY/pXO/0or0qcGh0OW3F8AAAAASUVORK5CYII=">
</div>
<div class="left">
<span>OFF TIER2</span>
</div>
</div>
</div>
css:
#CorpDealerSearch{
display:table;
padding : 5px;
border: 2px solid gray;
border-radius:3px;
}
.row{
display:table-row;
}
.left {
display:table-cell;
display:inline-block;
padding:5px;
}
But I want the design like the screenshot below. How can I modify the fiddle to get the design like this?
I need to do changes only for the last cell.

Answer 1

I have updated your fiddle:
http://jsfiddle.net/9LdEc/4/
I have added some of classes to your html and used the following css:
body {
font-family: Arial;
}
#CorpDealerSearch {
display:table;
padding : 5px;
border: 2px solid gray;
border-radius:5px;
vertical-align: middle;
line-height: 25px;
}
#CorpDealerSearch a,
#CorpDealerSearch a:hover,
#CorpDealerSearch a:visited {
color: red;
font-weight: bold;
}
.row {
display:table-cell;
vertical-align: middle;
}
.left {
display:table-cell;
display:inline-block;
padding-left:5px;
padding-right: 5px;
}
.tier {
border-left: 2px dotted black;
background-color: lightgreen;
}
Is this what you wanted?