label and input are rendered in the same line even after applying flex-CodePudding

I don't know for some reason the label is being rendered along side input box in the same line even after setting flex-direction:column. what is the reason for such weird behavior when next two form elements works just fine. Please check in responsive view mode.

.login-form {
    position: absolute;
    display: flex;
    flex-direction: column;
    height: 60%;
    width: 80%;
    top: 30%;
    left: 10%;
}

.login-form > div {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    flex-direction: column;
    height: 20%;
}

.login-form label {
    font-size: 35px;
    font-weight: bold;
    color: honeydew;
}

.login-form > div > input[type=text], input[type=password] {
    
    border: none;
    border-bottom: 2px solid oldlace;
    background-color: transparent;
    outline: none;
    font-size: 40px;
    width: 85%;
    height: 55%;
    color: honeydew;
}

.login-form > div > button {
    background-color: red;
    color: white;
    width: 85%;
    height: 65%;
    font-size: 35px;
    
}

The problem lies in the first div element in the form.

<form class="login-form">
                <div class="input__control"> 
                    <label>E-mail</label>>
                    <input type="text" placeholder="Enter Your E-mail"/>
                </div>
                <div class="pass__control"> 
                    <label> Password </label>
                    <input type="password" placeholder="Enter Your Password"/>
                </div>

                <div>
                    <button type="submit"> Login </button>
                </div>> 
            </form>

CodePudding user response：

Extra '>' token at line 3??

CodePudding user response：

If you put <br> between each label and input, it will pass the input to the next line.

<form class="login-form">
            <div class="input__control"> 
                <label>E-mail</label>
                <br>
                <input type="text" placeholder="Enter Your E-mail"/>
            </div>
            <div class="pass__control"> 
                <label> Password </label>
                <br>
                <input type="password" placeholder="Enter Your Password"/>
            </div>

            <div>
                <button type="submit"> Login </button>
            </div>
        </form>