I am currently working on project #6 of the Odin Project and having some minor problems. I am trying to get my project as close to https://cdn.statically.io/gh/TheOdinProject/curriculum/5f37d43908ef92499e95a9b90fc3cc291a95014c/html_css/project-sign-up-form/sign-up-form.png that^ as possible within reason. So I am currently trying to set the right flex or flex-shorthand rules in CSS to move the input fields so that I get two columns of bars instead of one but don't know how.
I tried different types of positioning, input:nth-child(even), and some other things that still didn't work for some reason. Here is my codepen: https://codepen.io/El0din-Ruh/pen/gONayLX`
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Sign Up Form</title><style> body { margin: 0; display: flex; align-items: center; } @font-face { font-family: Norse-Bold; src: url(Norse-Bold.otf); } html { font-family: Norse-Bold; } #Right-side { padding-left: 20px; } p { padding: 10px; font-size: 20px; } form { background-color:burlywood; display: flex; flex-direction: column; justify-content: center; position:static; } form div input { display: flex; flex-direction: row; justify-content: center; position:relative; } input:nth-of-type(2), input:nth-of-type(4), input:nth-of-type(6){ color:aqua; }</style></head><body><div id="image"><img src="Tree.jpg" height ="600px" width="300px"></div><div id="Right-side"><p> Attention! This is not a real online service! But please, still sign up for its' makers benefit. You can sign up right below: Right... Down... There.</p><p>I for one very much think that you should sign up OR login</p><form id="Inputs"><div id="FN"><label for="first_name">First Name:</label><input type="text" name="first_name" id="first_name"></div><div id="LN"><label for="last_name">Last Name:</label><input type="text" name="last_name" id="last_name"></div> <div id="EM"><label for="Email">Email:</label><input type="email" name="Email" id="email"></div><div id="PN"><label for="phone_number">Phone Number:</label><input type="number" name="phone_number" id="phone_number"></div><div id="PS"><label for="password">Password:</label><input type="password" name="password" id="password"></div> <div id="CFNPS"><label for="CPassword">Confirm Password:</label><input type="password" name="CPassword" id="ConPassword"></div><button type="submit">Create an Account</button></form><div id="Login"><p>Already have an Account? <a href="https://google.com">Log In</href></p></div></div></body></html>