align form elements with flexbox example 1b (Interactive Example)

<!doctype html>
<title>Example</title>
<style>
  .wrapper {
    background-color: whitesmoke;
    list-style-type: none;
    padding: 0;
    border-radius: 3px;
  }
  .form-row {
    display: flex;
    justify-content: flex-end;
    padding: .5em;
  }
  .form-row > label {
    padding: .5em 1em .5em 0;
  }
  .form-row > input {
    flex: 1;
  }
  .form-row > input,
  .form-row > button {
    padding: .5em;
  }
  .form-row > button {
   background: gray;
   color: white;
   border: 0;
  }
</style>
<form>
  <ul class="wrapper">
    <li class="form-row">
      <label for="name">Name</label>
      <input type="text" id="name">
    </li>
    <li class="form-row">
      <label for="townborn">Town you were born in</label>
      <input type="text" id="townborn">
    </li>
    <li class="form-row">
      <label for="email">Email Address</label>
      <input type="email" id="email">
    </li>
    <li class="form-row">
      <button type="submit">Submit</button>
    </li>
  </ul>
</form>