title: Same line quantity counter (+/-)
body: <p>I'm having some trouble trying to implement a quantity counter like so</p>
  
  <p><a href="https://i.stack.imgur.com/bdZmB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bdZmB.png" alt="enter image description here"></a></p>
  
  <p>Here is what I have so far (<a href="http://codepen.io/noobskie/pen/qaErby?editors=1100" rel="nofollow noreferrer">Codepen</a>)</p>
  
  <p>My problem is that I keep getting random white space and it feels the way Im going about wrapping the elements is inefficient. Is there any other way to go about making this?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!-- Quantity --&gt;
  &lt;div class="quantity-number-v2 clearfix"&gt;
    &lt;div class="quantity-wrapper"&gt;
      &lt;i class="add-down add-action fa fa-minus"&gt;&lt;/i&gt;
      &lt;input id="prodQuantity" type="text" name="quantity" value="700" /&gt;
      &lt;i class="add-up add-action fa fa-plus"&gt;&lt;/i&gt;
    &lt;/div&gt;
    &lt;div id="stock" class="text-center"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- /Quantity --&gt;
  </code></pre>
  
  <p><strong>SCSS</strong></p>
  
  <pre><code>.quantity-number-v2{
    margin: 50px;
    #prodQuantity{
      width: 60px;
      height: 30px;
      border: 1px solid #222;
    }
    i{
      padding: 6.8px 10px;
      border: 1px solid #222;
    }
  }
  </code></pre>