如何对齐元素，以便相似的元素显示在同一行中

这是我当前的显示。

添加到购物车按钮未在行中显示，因为第三个元素的产品名称有点长。

这是用于显示产品的代码。

<div>
    <div class='box' ng-repeat="product in ProductService.Products | filter:{'SubCategoryID': SCId.toString()}:true | orderBy:'ProductName'">

        <br>        <b>{{product.BrandName}}</b>
        <br>        {{product.ProductName}}
        <br><br>    <img src="http://localhost/{{ product.ProductImagePath }}" alt="" border=3 height=75 width=75></img>
        <br><br>    <select class="form-control btn btn-default btn-xs" ng-init="SelectedVariant = product.Variants[0]" ng-model="SelectedVariant" ng-options="variant.VariantName for variant in product.Variants" ng-change="ChangeVariant(product.ProductID, SelectedVariant.VariantID)"></select>

        <br>        <strike> {{SelectedVariant.MRP}} </strike> &nbsp; {{SelectedVariant.SellPrice}} {{SelectedVariant.InCart}}
        <br><br>        

        <div ng-if="SelectedVariant.InCart==0">
            <a class="btn btn-success btn-md" ng-click="AddToCart(product.ProductID, SelectedVariant.VariantID)">Add to Cart &nbsp;
                <span class="glyphicon glyphicon-plus"></span> 
            </a>
        </div>



        <div ng-if="SelectedVariant.InCart>0">

            <a class="btn btn-default btn-xs" ng-click="PlusItem(product.ProductID, SelectedVariant.VariantID)">
                <span class="glyphicon glyphicon-plus"></span> 
            </a>

            <button type="button" class="btn btn-info disabled">{{SelectedVariant.InCart}} in cart</button>


            <a class="btn btn-default btn-xs" ng-click="MinusItem(product.ProductID, SelectedVariant.VariantID)">
                <span class="glyphicon glyphicon-minus"></span> 
            </a>
        </div>  

    </div>          
</div>

这是box的CSS样式。

.box {
    margin : 5px;
    display : inline-block;
    width: 150px;
    height: 300px;
    background-color: #F5FBEF;
    text-align:center;
    vertical-align: top;
}

有人可以帮我，使所有添加到购物车按钮或说框中的所有元素都从相似的行开始。像显示中的1,2,4,5,6元素。