CSS - How to line up buttons?

[ulagerket]

I am trying to create a form with multiple rows. Each row has an optional input field followed by a mandatory button. The buttons should line up vertically - something like this:\[code\]_____________ _______________| input 1 | | button 1 ||___________| |_____________| _______________ | button 2 | |_____________|\[/code\]I tried to float the button left with a fixed left margin, but doing so moves the input field to the right of the button - even though the input field appears first in the markup:\[code\]<div> <input type="text"> <button>Action 1</button></div>\[/code\]Please see my jsfiddle here. Why is this happening and what's the correct solution?