css - 2 HTML buttons that I want to be side by side on the same line

Question

I have 2 HTML buttons that I want to be side by side on the same line with the first (Submit Request(s)) button to be first. The problem that I am having is that the top of the second button starts where the bottom of the bottom button ends. The second button is correctly moved to the right because of the margin-left: 50px element. I have listed the HTML of the 2 buttons below:

<button style="float: left;" onclick="javascript:submitRequests();">
    Submit Request(s)
</button>
<button style="float: left; margin-left: 50px" 
        onclick="javascript:document.location.reload(true);">
    Reset
</button>

Answer 1

try before use a Codepen or JsFiddle to add your code or idea.

I'm suggest you to see my porpose to this solution: http://cdpn.io/uKLga

You see it be simple you just add 2 class and define this buttons types (submit and reset) with these classes help you to format side by site.