Inlining two buttons - one inside a <form>, one outside - html

Question

I have two buttons in an html template, one inside a form, the other outside of it. How do I style them via CSS such that they appear inline? Including display: inline in the second button doesn't work.
E.g. looking at the following snippet, how would OK_1 and OK_2 appear inline (using CSS only):
<form action="some_url" method="POST" enctype="multipart/form-data">
<!-- some form -->
<input class="button" type="submit" value="OK_1">
</form>
<button>OK_2</button>

Answer 1

TRY THIS:
Here is a runnable snippet.
form input[type="submit"] {
display: inline-block;
padding: 10px;
background-color: #000000;
color: #ffffff;
float: left;
margin:5px;
}
.button {
display: inline-block;
padding: 10px;
background-color: #000000;
color: #ffffff;
border: 0;
float: left;
margin:5px;
}
<form action="some_url" method="POST" enctype="multipart/form-data">
<!-- some form -->
<input class="button" type="submit" value="OK_1">
</form>
<button class="button">OK_2</button>
You can customize all the styles above.

Answer 2

Simply make the parent a flex container:
body { display: flex; }
<form action="some_url" method="POST" enctype="multipart/form-data">
<!-- some form -->
<input class="button" type="submit" value="OK_1">
</form>
<button>OK_2</button>
In a flex formatting context, flex items (the child elements in a flex container) line up in a row by default.

Answer 3

Adding display: inline-block should do the trick.
form {
display: inline-block;
}
<form action="some_url" method="POST" enctype="multipart/form-data">
<!-- some form -->
<input class="button" type="submit" value="OK_1">
</form>
<button>OK_2</button>

Answer 4

You should give the form a class, so that other forms won't do that.
form.inline_after {
display: inline-block;
}
<pre>↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
↓The form element is <span style="border: 4px dotted red; color: magenta; background-color: maroon;">in red</span>!↓
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓</pre>
<form style="border: 4px dotted red; color: magenta; background-color: maroon;" class="inline_after" action="some_url" method="POST" enctype="multipart/form-data">
<!-- some form -->
<input style="margin: 5px; padding: 5px; color: magenta; background-color: maroon;" class="inline_after" class="button" type="submit" value="Button in the form!" onclick='alert("This is in the "+this.parentElement.nodeName+" element!")'>
</form>
<button style="padding: 5px;" onclick='alert("This is in the "+this.parentElement.nodeName+" element!")'>
Button out of the form, but inline!
</button>

Answer 5

Make css for the form :
form {
float: left;
margin-right: 10px;
}
<form action="some_url" method="POST" enctype="multipart/form-data">
<!-- some form -->
<input class="button" type="submit" value="OK_1">
</form>
<button>OK_2</button>
This is a short answer :)