Greetings. I am facing some challenges in positioning child elements within a flexbox container with the flex-direction:column property.
Can anyone advise on how to place the sign up element next to the sign in element?
https://i.sstatic.net/p3DaO.png
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;
}