Question about CSS

I'm having an issue getting things lined up properly. Ideally I would like to have the price, then the quantity, then the Add to cart button. Here is what mine currently looks like:
http://i.imgur.com/1BcVWg5.png

Here is my css for each currently:
Box:

style="border:4px solid #ccc; padding: 12px;"

Code (markup):

Price:

{line-height:1.8}

Code (markup):

Quantity:

style="max-width:60px;float:right"

Code (markup):

Add to Cart:

input.button{font-size:100%;margin:0;line-height:1;cursor:pointer;position:relative;font-family:inherit;text-decoration:none;overflow:visible;padding:.618em 1em;font-weight:700;border-radius:3px;float:right;color:#515151;background-color:#ebe9eb;border:0;white-space:nowrap;display:inline-block;background-image:none;box-shadow:none;-webkit-box-shadow:none;text-shadow:none}

Code (markup):

Any help is appreciated!

 

That is a LOT of CSS just to line up three items in a box...
You don't really need any of it (well, almost). Have a look here:
https://jsfiddle.net/zyaauu3c/

 

Not just a lot of CSS, but a lot of INLINED CSS which automatically means the entire codebase is probably rubbish.

Of course, CSS without the markup it's applied to is just gibberish.

 

You will have to do inline CSS for it because its easy to change it at the testing...
but to keep your contents in the same box you will have to deal with position property of CSS.

 

If I where you, I would do it like this...

<style>
.align{
display:inline-block;
}
</style>

<div class="align">box</div>
<div class="align">price</div>
<div class="align">quantity</div>
<button class="align"></button>

Code (markup):

 

Why are you all answering a question that has already been answered (by me), and adding gibberish, useless code as well? Don't you actually read the previous posts?