form {
  .form-row {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding: .2em;

  }
  .form-row > label {
    padding: .5em 1em .5em 0;
    flex: 1;
  }
  .form-row > label + label {
      flex: 0;
  }
  .form-row > label.switch  + label {
      flex: 1;
  }
  .form-row > input {
    flex: 2;

  }
  .form-row > span {
      flex: 2;
      text-align: right;
  }
  .form-row input[type="checkbox"] {
      margin-top: 12px;
  }
  .form-row input[type="range"] {

  }
 @media screen and (min-width: 768px) {
   	.form-row > input, .form-row > span {
    	flex: 3;  
   }
  }
 @media screen and (min-width: 992px) {
   	.form-row > input, .form-row > span {
    	flex: 4;  
   }
  }
 @media screen and (min-width: 1200px) {
   	.form-row > input, .form-row > span {
    	flex: 5;  
   }
  }
}