div alignment based on the content - html

Question

I want to design the layout like below screenshot.
I tried to do this by using following code.
<div class="salesDiv">
<div>
Quarter To Date
</div>
<div>
830
</div>
<div>
<img src="~/Images/navigation-unit-actionplan.png" />
</div>
<div class="offtier">
<span>OFF TIER2</span>
</div>
<br />
</div>
<br />
<br />
<div class="salesDiv">
<div>
Rolling 3 Month
</div>
<div>
835
</div>
<div>
<img src="~/Images/navigation-unit-actionplan.png" />
</div>
<div class="offtier">
<span>National 852</span>
</div>
<br />
</div>
css :
.salesDiv {
width: 313px;
margin-left: 10px;
border: solid 1px gray;
border-radius: 4px;
height: 20px;
display: inline-block;
}
.salesDiv > div {
float:left;
margin-left:20px;
}
.offtier {
border-left-style: dotted;
background-color: green;
height: 20px;
width: 88px;
}
but it didn't give the same layout as like above screenshot. I want to do like above screenshot. What's going wrong? Please anyone look into this.
http://jsfiddle.net/zHLMS/
spacing also not good. I need equal spacing for all the content inside the border.
I need to maintain the same width for both the element.
Thanks,
Siva

Answer 1

You need to apply
display: inline-block;
float:right;
to the sales > divs and float: right to the offtier divs
Here's the modified code

Answer 2

Try this....Updated Link
.salesDiv {
width: 313px;
margin-left: 10px;
border: solid 1px gray;
-webkit-border-radius:5px;
border-radius:5px;
height: 20px;
display: inline-block;
position:relative;
}
.salesDiv > div {
float:left;
margin-left:20px;
}
.offtier {
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
background-color: green;
height: 20px;
width: 88px;
right:0;
position:absolute;
}
Good Luck..Enjoy