Dúvida sobre estilização com flexbox

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á :)