'position child elements in flexbox

Good day. I'm having trouble figuring out how to position child elements of a flexbox when flex-direction:column is used.

How to position sign up next to sign in enter image description here

html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome</title>
<!--    <link rel="stylesheet" href="/css/main.css"/>-->
    <link rel="stylesheet" th:href="@{/css/main.css}"/>
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
</head>
<body>
    <div class="login-container">
        <h2 class="active">sign in</h2>
        <h2 class="inactive">sign up</h2>
        <form method="post">
            <input type="text" id="fname" placeholder="Enter first name">
            <span>first name</span>
            <input type="text" id="lname" placeholder="Enter last name">
            <span>last name</span>
            <input type="text" id="email" placeholder="Enter your email">
            <span>email</span>
            <input type="submit" value="Submit" class="submit-btn">
        </form>
    </div>
</body>
</html>

css

body, .submit-btn {
    background-color: #d3d3d3;
    font-family: 'Montserrat', sans-serif;
    color:#fff;
    font-size: 14px;
    letter-spacing: 1px;
}

.login-container {
    /*position:relative;*/
    /*align-items: center;*/
    flex-direction: column;
    display:flex;
    height:560px;
    width:405px;
    margin:auto;
    padding:60px 60px;
    box-shadow: 0 30px 60px -5px;
}

h2 {
    padding-left: 12px;
    font-size: 22px;
    text-transform: uppercase;
    padding-bottom: 5px;
    letter-spacing: 2px;
    position: relative;
    /*display: inline-block;*/
    font-weight: 100;
}
cssflexbox


Solution 1:[1]

As mentioned in the comments. Removing flex-direction, making form width:100% and making flex-wrap: wrap solves the problem. `

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kristjan

Related Questions