Align form elements in CSS

form {
  width: 80%;
  margin: 0 auto;
}

label,
input {
  /* In order to define widths */
  display: inline-block;
}

label {
  width: 30%;
  /* Positions the label text beside the input */
  text-align: right;
}

label+input {
  width: 30%;
  /* Large margin-right to force the next element to the new-line
           and margin-left to create a gutter between the label and input */
  margin: 0 30% 0 4%;
}


/* Only the submit button is matched by this selector,
       but to be sure you could use an id or class for that button */

input+input {
  float: right;
}

<form action="#" method="post">
  <!-- note that I've added a 'for' attribute to
       both of the <label> elements, which is
       equal to the 'id' attribute of the relevant
       <input> element; this means that clicking
       the <label> will focus the <input>: -->
  <label for="username">Username</label>
  <input id="username" type="text" />

  <label for="password">Password</label>
  <input id="password" type="password" />

  <input type="submit" value="submit" />
</form>

*,
::before,
::after {
  /* selecting all elements on the page, along with the ::before
     and ::after pseudo-elements; resetting their margin and
     padding to zero and forcing all elements to calculate their
     box-sizing the same way, 'border-box' includes the border-widths,
     and padding, in the stated width: */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

form {
  /* Using CSS Grid to lay out the elements in two-dimensions: */
  display: grid;
  /* specifying a 0.5em gutter/gap between adjacent elements: */
  gap: 0.5em;
  /* declaring a number of named grid areas in order to lay out
     the child elements; the areas identified with a period (.)
     are 'empty' areas, whereas the areas named by strings are
     used, later, to place elements according to those names: */
  grid-template-areas:
    "usernameLabel . usernameInput"
    "passwordLabel . passwordInput"
    ". . submit";
  /* declaring the size of each of the three columns; 1fr is
     one fractional unit of the available space, and is the
     size of the first and last of the columns. The central
     column is declared as being 0.5em in width: */
  grid-template-columns: 1fr 0.5em 1fr;
  margin: 1em auto;
  width: 80%;
}

label {
  /* placing all <label> elements in the grid column 1 (the first): */
  grid-column: 1;
  /* aligning text-content to the right in order to position the label
     text near to the relevant <input>: */
  text-align: right;
}

label::after {
  content: ':';
}

input {
  grid-column: 3;
}

button {
  /* positioning the <button> element in the grid-area identified
     by the name of 'submit': */
  grid-area: submit;
}

<form action="" method="post">
  <label for="username">Username</label>
  <input id="username" type="text" />

  <label for="password">Password</label>
  <input id="password" type="password" />

  <input type="submit" value="submit" />
</form>