выравнивание div в зависимости от содержимого

Я хочу создать макет, как показано ниже.

Я попытался сделать это, используя следующий код.

<div class="salesDiv">
        <div>
             Quarter To Date
        </div>
        <div>
          <a href="self">830</a>
        </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>
          <a href="self">835</a>
        </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;

}

но он не дал того же макета, что и выше на скриншоте. Я хочу сделать, как показано выше. Что пошло не так? Пожалуйста, посмотрите на это.

http://jsfiddle.net/zHLMS/

интервал также не очень хорош. Мне нужно равное расстояние для всего содержимого внутри границы.

Мне нужно поддерживать ту же ширину для обоих элементов.

Благодаря,

Сива