title: Align input and button on one line
body: <p>I have such table part:</p>
  
  <pre><code>&lt;td&gt;
    &lt;form accept-charset="UTF-8" action="/line_items" method="post"&gt;
      &lt;input class="qnt_to_cart2" id="110040Q" name="cart_quantity" pattern="0|[1-9]\d{0,2}" required="required" type="text" value="1"&gt;
      &lt;input class="orange-button to-cart_no" id="110040Q" name="commit" type="submit" value="В корзину"&gt;
    &lt;/form&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>And css (sass):</p>
  
  <pre><code>.qnt_to_cart, .qnt_to_cart2{
    width: 30px;
    height: 20px;
  }
  
  .orange-button{
    display: inline-block;
    padding: 6px;
    @include gradient-background(bottom, $or1, #fbb752); 
    //background: url('button-carbon-bg.png') no-repeat, -webkit-linear-gradient(bottom, $or1, #fbb752);
    @include border-radius(5px, 5px, 5px, 5px);
    //background: transparent url('button-carbon-bg.png') no-repeat;
    border: 1px solid #d27d00;
    font-family: “Myriad Pro”, Arial, Helvetica, Tahoma, sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: $or3;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .70);
    font-style: normal;
    @include box-shadow(inset 0 1px 0 rgba(255,255,255,0.5));
    border-bottom:2px solid #B16900;
  }
  </code></pre>
  
  <p><a href="http://pastebin.com/9tTjUYmh" rel="nofollow noreferrer">All css file is here</a></p>
  
  <p>Now i see this:</p>
  
  <p><img src="https://i.stack.imgur.com/5M3dp.png" alt="enter image description here"></p>
  
  <p>So how to layout two elements on one line, with minimum code transformation?</p>