title: how to display products side by side
body: <p>This is my product template file.</p>
  
  <pre><code>&lt;br&gt;
  &lt;div&gt;
      &lt;div ng-if="SearchText.length&lt;3" ng-repeat="product in pc.ProductService.Products  | filter:FilterExpr:true |orderBy:['SubCategoryName','BrandName'] | groupBy:['BrandName']" &gt;
          &lt;h2 ng-show="product.group_by_CHANGED"&gt;{{product.BrandName}} &lt;/h2&gt;
          &lt;div class='box'&gt;
              &lt;ng-include src="'commonTemplate.html'"&gt;&lt;/ng-include&gt;
          &lt;/div&gt;
      &lt;/div&gt;  
  
  
  
      &lt;!-- template (common piece of code) --&gt;
      &lt;script type="text/ng-template" id="commonTemplate.html"&gt;
          &lt;div class="BrandName"&gt; &lt;b&gt;{{product.BrandName}}&lt;/b&gt; &lt;/div&gt;
          &lt;div class="ProductName"&gt; {{product.ProductName}} &lt;/div&gt;
          &lt;br&gt;
          &lt;div&gt; &lt;img src="http://localhost/{{ product.ProductImagePath }}" alt="" border=3 height=75 width=75&gt;&lt;/img&gt; &lt;/div&gt;
          &lt;div class="ProductVariants"&gt; 
              &lt;select class="form-control btn btn-default btn-xs text-center" 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)"&gt;&lt;/select&gt;
          &lt;/div&gt;
  
          &lt;div class="Price"&gt; 
              &lt;strike&gt; {{SelectedVariant.MRP}} &lt;/strike&gt; &amp;nbsp; {{SelectedVariant.SellPrice}} 
          &lt;/div&gt;      
  
          &lt;div class="AddToCart" ng-if="SelectedVariant.InCart==0"&gt;
              &lt;a class="btn btn-success btn-sm" ng-click="pc.AddToCart(product.ProductID, SelectedVariant.VariantID)"&gt;Add to Cart &amp;nbsp;
                  &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt; 
              &lt;/a&gt;
          &lt;/div&gt;
  
          &lt;div class="AddToCart" ng-if="SelectedVariant.InCart&gt;0"&gt;
  
              &lt;a class="btn btn-default btn-xs" ng-click="pc.PlusItem(product.ProductID, SelectedVariant.VariantID)"&gt;
                  &lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt; 
              &lt;/a&gt;
  
              &lt;button type="button" class="btn btn-sm btn-info disabled"&gt;{{SelectedVariant.InCart}} in cart&lt;/button&gt;
  
  
              &lt;a class="btn btn-default btn-xs" ng-click="pc.MinusItem(product.ProductID, SelectedVariant.VariantID)"&gt;
                  &lt;span class="glyphicon glyphicon-minus"&gt;&lt;/span&gt; 
              &lt;/a&gt;
          &lt;/div&gt;
  
      &lt;/script&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Box class is defined like this in CSS:</p>
  
  <pre><code>.box {
  margin : 5px;
  display : inline-block;
  width: 170px;
  height: 275px;
  background-color: #F5FBEF;
  text-align:center;
  vertical-align: top;
  }
  </code></pre>
  
  <p>When display my product list look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/fwOMq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fwOMq.png" alt="enter image description here"></a></p>
  
  <p>I want to show products side by side. </p>
  
  <p>Can some one help me how to do that?</p>
  
  <p>EDIT:</p>
  
  <p>After changes suggested by Rachel Gallen, it turn out like this:</p>
  
  <p><a href="https://i.stack.imgur.com/idhvO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/idhvO.png" alt="enter image description here"></a></p>
  
  <p>I want to display brand name in new line when new brand encounters. rest all looks good.</p>