CSS - как встроить форму / ввод, но укладывать каждую строку с правильным отступом?

Question

@font-face {
    font-family: 'Billabong';
    font-style: normal;
    font-weight: normal;
    src: url('/instagram-clone/fonts/Billabong.woff') format('woff');
    }

body {
    display: block; 
    border: 1px solid black;
    padding:0px; 
    margin:0px;
    height: auto;
}

.titlecontainer {
    border: 1px solid black;
    padding:0px; 
    width:400px;
    height:40px;
    text-align: center;
    border-radius: 4px;
    color: white;
    font-family: Billabong;
    font-size: 16px;
    line-height: 5px;
    background: linear-gradient(176deg, rgba(43,104,140,1) 0%, rgba(28,97,138,1) 100%);
    margin: 0 auto;
    margin-top: 10%;
   
}


.inputcontainer {
    border: 1px solid black;
    width:400px;
    height:200px;
    margin: -2px auto;
    border-radius: 4px; 
}

.login {
    border: 1px solid black;
}

 <div class="titlecontainer">
      <h2 id = "igtitle">Instagram</h2>
  </div>

<div class="inputcontainer">
  
  <div class="login">
    <label for="password">Username:<label>
    <input id = "pwinput" type = "text" name="password"/>
   <label for="password">Password:<label>
    <input id = "pwinput" type = "text" name="password"/>
   
 </div>

</div>
  

Answer 1

.login label {
  display: inline-block;
  width: 75px;
}

<div class="login">
  <div>
    <label for="password">Username:</label>
    <input id = "pwinput" type = "text" name="password"/>
  </div>
  <div>
    <label for="password">Password:</label>
    <input id = "pwinput" type = "text" name="password"/>
  </div>
 </div>