align form elements with flexbox example 3 (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;
    flex: 1;
  }
  .form-row > input {
    flex: 2;
  }
  .form-row > input,
  .form-row > button {
    padding: .5em;
  }
  .form-row > button {
   background: gray;
   color: white;
   border: 0;
  }
 @media screen and (min-width: 768px) {
   	.form-row > input {
    	flex: 3;  
   }
  }
 @media screen and (min-width: 992px) {
   	.form-row > input {
    	flex: 4;  
   }
  }
 @media screen and (min-width: 1200px) {
   	.form-row > input {
    	flex: 5;  
   }
  }
</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>