Text input box side by side not aligning in css3 - html

Question

I require 2 text input boxes side by side in one page using css3. I have everything ready except that the second box is coming below the first input box. How can i correct this in css.
html:
<div class="main">
<div class="one">
<div class="register">
<h3>Create your account</h3>
<form id="reg-form">
<div>
<div>
<label for="username">Username</label>
<input type="text" id="username" spellcheck="false" placeholder="User Name" />
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" />
</div>
<div>
<label></label>
<input type="submit" value="Shop Login" id="create-account" class="button"/>
</div>
</form>
</div>
</div>
<div class="two">
<div class="register">
<h3>Create your account</h3>
<form id="reg-form1">
<div>
<label for="name1">Name</label>
<input type="text" id="name1" spellcheck="false" placeholder="Enter Your Name"/>
</div>
<div>
<label for="email1">Email</label>
<input type="text" id="email1" spellcheck="false" placeholder="mymail#mail.com"/>
</div>
<div>
<label for="username1">Username</label>
<input type="text" id="username1" spellcheck="false" placeholder="User Name" />
</div>
<div>
<label for="password1">Password</label>
<input type="password" id="password1" />
</div>
<div>
<label for="password-again1">Password Again</label>
<input type="password" id="password-again1" />
</div>
<div>
<label></label>
<input type="submit" value="Create Account" id="create-account1" class="button"/>
</div>
</form>
</div>
</div>
</div>
CSS
.main > div {
display: inline-block;
width: 49%;
margin-top: 10px;
}
.two .register {
border: none;
}
.two .register h3 {
border-bottom-color: #909090;
}
.two .register .sep {
border-color: #909090;
}
.register {
width: 400px;
margin: 10px auto;
padding: 10px;
border: 7px solid #ADD8E6;
border-radius: 10px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
background-color: #f0f0f0;
box-shadow: 0 0 20px 0 #000000;
}
.register h3 {
margin: 0 15px 20px;
border-bottom: 2px solid #72b372;
padding: 5px 10px 5px 0;
font-size: 1.1em;
}
.register div {
margin: 0 0 15px 0;
border: none;
}
.register label {
display: inline-block;
width: 25%;
text-align: right;
margin: 10px;
}
.register input[type=text], .register input[type=password] {
width: 65%;
font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif;
padding: 5px;
font-size: 0.9em;
border-radius: 5px;
background: rgba(0, 0, 0, 0.07);
}
.register input[type=text]:focus, .register input[type=password]:focus {
background: #FFFFFF;
}
.register .button {
font-size: 1em;
border-radius: 8px;
padding: 10px;
border: 1px solid #ADD8E6;
box-shadow: 0 1px 0 0 #05B8CC inset;
background: #05B8CC;
background: -webkit-linear-gradient(#ADD8E6, #05B8CC);
background: -moz-linear-gradient(#ADD8E6, #05B8CC);
background: -o-linear-gradient(#ADD8E6, #05B8CC);
background: linear-gradient(#ADD8E6, #05B8CC);
}
.register .button:hover {
background: #51db1c;
background: -webkit-linear-gradient(#51db1c, #6ba061);
background: -moz-linear-gradient(#51db1c, #6ba061);
background: -o-linear-gradient(#51db1c, #6ba061);
background: linear-gradient(#51db1c, #6ba061);
}
.register .sep {
border: 1px solid #72b372;
position: relative;
margin: 35px 20px;
}
.register .or {
position: absolute;
width: 50px;
left: 50%;
background: #f0f0f0;
text-align: center;
margin: -10px 0 0 -25px;
line-height: 20px;
}
.register .connect {
width: 400px;
margin: 0 auto;
text-align: center;
}
I have provided a jsFiddle Demo
I require it aligned side by side rather than top bottom as in demo. Thanks in advance

Answer 1

You have missed a closing div before <div class="two">.
Adding the closing div will make both forms next to each other.
Then you need to add a little CSS rule to make both forms perfectly aligned vertically:
div.one {
position: relative;
top: -165px
}
See the demo here: http://jsfiddle.net/t5SNE/7/