Two Forms Side By Side in one div

I have a div with a form in it.  I want to place a second form in the div on the right of the first form.  How do I do this?  Right now they are lined up vertically.  I want both inside one div side by side.
The Javascript

//Function To Display Popup
function div_show() {
document.getElementById('abc').style.display = "block";
}
//Function to Hide Popup
function div_hide(){
document.getElementById('abc').style.display = "none";
}

Select allOpen in new window

The Div

<div id="abcd">    
<!-- Popup Div Starts Here -->
<div id="popupLog">
<form action="#" id="form" method="post" name="form">
<img id="close" src="images/3.png" onclick ="div_hide()">
<h2>Join Mediascrubber</h2>
<hr>
<input id="firstname" name="firstname" placeholder="First Name" type="text">
<input id="lastname" name="lastname" placeholder="Last Name" type="text">
<input id="username" name="username" placeholder="User Name" type="text">
<input id="password" name="password" placeholder="Password" type="text">
<input id="email" name="email" placeholder="Email" type="text">
&nbsp;
<!--textarea id="msg" name="message" placeholder="Message"></textarea-->
<a href="javascript:%20check_empty()" id="submit">Send</a>
</form>



<form action="#" id="form" method="post" name="form">
<img id="close" src="images/3.png" onclick ="div_hide()">
<h2>Log In</h2>
<hr>
<input id="username" name="username" placeholder="User Name" type="text">
<input id="password" name="password" placeholder="Password" type="text">
&nbsp;
<!--textarea id="msg" name="message" placeholder="Message"></textarea-->
<a href="javascript:%20check_empty()" id="submit">Send</a>
</form>
<!-- Popup Div Ends Here -->
</div>
</div>

Select allOpen in new window