Text input box side by side not aligning in css3

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/