css Dúvida sobre estilização com flexbox

[bleszerd 0]

Estou migrando para o frontend recentemente e tenho tido dificuldades para lidar com a formatação de estilos com o CSS, alguém poderia me ajudar? Minha intenção é que o conteúdo destacado em vermelho ocupe o local da marcação verde e o resto fique centralizado na tela. Estou usando o ReactJS para a composição, porém o CSS segue as mesmas regras do tradicional com HTML puro.

 

Como podem ver até pela imagem, design não é meu ponto forte.

 

Código do JSX (Componente do React):

<div className="login-container">
            <section className="form">
                <form>
                    <h1>Bem vindo!</h1>

                    <input 
                        type="text"
                        placeholder="Login"
                    />
                    <input 
                        type="password"
                        placeholder="Senha"
                    />
                    <p>Possuo um Token</p>
                    <input 
                        type="text"
                        placeholder="Token"
                        className="token-input"
                    />
                </form>
            </section>
        </div>

 

Código do CSS:

.login-container{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1120px;
    height: 100vh;
    margin: 0 auto;
}

.login-container section.form{
    width: 100%;
    max-width: 350px;
}

.login-container section.form form{
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 1250px;
    height: 100%;
    max-height: 700px;
}

.login-container section.form form h1{
    color: #fff;
    font-weight: bolder;
    text-shadow: #1B182E 2px 2px 8px;
    font-size: 42px;
    margin-bottom: 32px;
    position: absolute;
    margin-top: -65px;
    background: transparent;
}

.login-container section.form form input{
    display: flex;
    justify-content: space-between;
    margin: 5px;
    width: 180px;
    height: 40px;
    max-width: 100%;
    font-weight: bold;
    padding: 8px;
    border-radius: 5px;
    color: white;
    background: #0A0816;
    border: solid #0D0929 2px;
}

.login-container section.form form p{

}

.login-container section.form form input + p + input{
    background: black;
    border: solid yellow 2px;
}

 

Pra quem não estiver afim de interpretar todo o código para tentar ajudar apenas diga o que você imagina que resolverá o problema. Obrigado desde já :)

[Public2004 79]

@bleszerd Boas e seja bem-vindo. Sugiro deixar o H1 antes de iniciar o form e não dentro dele. O Flex é bem interessante e você pode utilizar várias combinações para distribuir e organizar seu conteúdo, no caso em questão, sugiro deixar o "form" como o container flex e os "inputs" como itens do flex. Para a distribuição e alinhamento como solicitou, permita que haja quebra no container e defina os itens com o tamanho que ocupe o espaço pretendido, por exemplo, se você quer dois "inputs" por linha, defina-os com 50% cada. O exemplo abaixo ilustra essa sugestão.

 

form {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  justify-content: center;
}
input {
  width: 50%;
}

 

Abs.