How can I show this 2 div side by side? - html

Question

Into a page I have the following
<div id="submitEventButtonDiv">
<div id="wwctrl_backButton" align="right">
<input id="backButton" type="submit" onclick="return clickSubmitButton();" value="Back">
</div>
<div id="wwctrl_submitEventButton" align="right">
<input id="submitEventButton" type="submit" onclick="return clickSubmitButton();" value="Submit">
</div>
</div>
As you can see there is an external div having id="submitEventButtonDiv" that contains 2 divs containing in turn 2 input fields.
Obviously when the 2 input field are displayed appear one below the other (because they are contained into a div that is block element).
How can I display one beside the other? (I can't delete the div that contains each input field because it is automatically rendered by a tag library that I am using, this that I have post is the rendered HTML obtained from a page that us Struts 2 tag library that wrap HTML following its logic, so in this case I can only work on CSS to do it)
Tnx

Answer 1

Just display the child elements inline.
#submitEventButtonDiv > div {
display:inline;
}
codepen here http://codepen.io/anon/pen/jEmaed

Answer 2

Depending on your cross browser needs, use flexbox:
#submitEventButtonDiv {
display: flex;
}
Will make all of the children flex items, which by default, stack horizontally, like you want.

Answer 3

If you float them both they'll be positioned next to each other. Adding
#submitEventButtonDiv > div {
float:left;
display:inline;
}
To your css should position them both to the left of the page next to eachother.

Answer 4

If the inner div IDs are always same, then you can add the following styles in your css:
div#wwctrl_backButton {
display: inline-block;
width: 50%;
}
div#wwctrl_submitEventButton{
display: inline-block;
width: 50%;
}

Answer 5

This generates the desired effect.
#submitEventButtonDiv > div {
display:inline;
float:right;
}