Как мне правильно настроить flex на этой странице регистрации? ⇐ CSS

[Anonymous]

В настоящее время я работаю над проектом №6 проекта Odin, и у меня возникли небольшие проблемы. Я пытаюсь приблизить свой проект к https://cdn.statically.io/gh/TheOdinPro ... p-form.png, насколько это возможно в пределах причина. Поэтому в настоящее время я пытаюсь установить правильные правила flex или flex-shorthand в CSS, чтобы переместить поля ввода, чтобы получить два столбца столбцов вместо одного, но не знаю, как это сделать.
Я пробовал разные типы позиционирования, input:nth-child(even) и некоторые другие вещи, которые по какой-то причине все равно не работали. Вот мой код: https://codepen.io/El0din-Ruh/pen/gONayLX`





Sign Up Form

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;
}






width="300px">

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.

I for one very much think that you should sign up OR login


First Name:


Last Name:


Email:


Phone Number:


Password:


Confirm Password:


Create an Account


Already have an Account? Log In







Подробнее здесь: https://stackoverflow.com/questions/787 ... gn-up-page