Question

I have such table part:

<td>
  <form accept-charset="UTF-8" action="/line_items" method="post">
    <input class="qnt_to_cart2" id="110040Q" name="cart_quantity" pattern="0|[1-9]\d{0,2}" required="required" type="text" value="1">
    <input class="orange-button to-cart_no" id="110040Q" name="commit" type="submit" value="В корзину">
  </form>
</td>

And css (sass):

.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;
}

All css file is here

Now i see this:

So how to layout two elements on one line, with minimum code transformation?

Answer 1

Try this:

<tr>
  <td colspan="2">
    <form accept-charset="UTF-8" action="/line_items" method="post">
      <input class="qnt_to_cart2" id="110040Q" name="cart_quantity" pattern="0|[1-9]\d{0,2}" required="required" type="text" value="1">
    </form>
  </td>

  <td align="right">
    <form accept-charset="UTF-8" action="/line_items" method="post">
      <input class="orange-button to-cart_no" id="110040Q" name="commit" type="submit" value="В корзину">
    </form>
  </td>
</tr>

Hope this helps!