Как сделать две формы на одну ось Y?

Question

Ребят, я хотел попробовать клёвый дизайн входа и регистрации на одной странице. Как выглядит:

у меня оно неправильно. Мне нужно чтобы это на одной оси Y находилось, чтобы ровно, в одну линию. Я незнаю как. Вот мой HTML код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/Styles/style.css">
</head>
<body>
    <center>
        <div class="reg-log">
            <form class="Form-log" action="" method="post">
                <div class="log">
                    <header class="header">
                        <h1>Авторизация</h1>
                    </header>
                    <br>
                    <input class="Input" plac>
                </div>
            </form>
            <form class="Form-reg" action="" method="post">
                <div class="reg">
                    <header class="header">
                        <h1>Регистрация</h1>
                    </header>
                </div>
            </form>
        </div>
    </center>
</body>
</html>

Ну а также сам CSS код который подключён к HTML файлу:

.reg-log {
    border: 1px solid black;
    border-radius: 10px;
    width: 850px;
}
.reg {
    display: inline-block;
    height: 420px;
    margin: 20px;
    border: 1px solid gray;
    border-radius: 20px;
}
.log {
    display: inline-block;
    height: 420px;
    margin: 20px;
    border: 1px solid gray;
    border-radius: 20px;
}
.header {
    border: 1px solid gray;
    border-radius: 18px 18px 0px 0px;
}
.Form-log {
    display: inline-block;
    height: 420px;
    text-align: center;
}
.Form-reg {
    display: inline-block;
    height: 420px;
    padding-bottom: 30px;
}

Ребят, помогите пожалуйста как сделать их ровно? Мне нужно на одну линию и саму форму, и в ней блок.

БЛОГ НА HUSL

Как сделать две формы на одну ось Y?

Ответы (0 шт):