Cacher is the code snippet organizer for pro developers

/*
  Responsive form elements
  Flexbox layout
*/
/*/////////////// GLOBAL STYLES ////////////////////*/
body{padding: 30px; background: #eee;}
header{margin-bottom: 5rem;}
/*/////////////// FONT STYLES ////////////////////*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
html{font-size: 62.5%;}
body{font-family: 'Open Sans', sans-serif;}
h1{font-size: 3rem;}
h2{font-size: 1.6rem;}
form{font-size: 1.4rem;}

/*/////////////// FORM STYLES ////////////////////*/
form .field-group{
  display: flex; 
  margin: 0 0 12px 0;
}
form .field-group .label{
  flex: 1; 
  text-align: right; 
  margin: 0 8px 0 0;
  padding: 2px 0;
}
form .field-group .field{
  flex: 3;
}
form .field-group:last-child{
  display: flex;
  justify-content: flex-end;
}
form .field-group:last-child .field{
  max-width: 75%;
}
input, select, textarea{
  padding: .4rem 1rem; 
  font-size: 1.8rem; 
  border: solid 1px #eee;
  background: #fff; 
  box-sizing: border-box;
}
textarea {
  width: 100%;  
}
input, select{
  width: 50%;
}
input[type="radio"],
input[type="checkbox"],
input[type="submit"]{
  width: auto;
}

/*/////////////// RWD STYLES ////////////////////*/
@media (max-width: 720px) {
  form .field-group .label{
     text-align: left; 
     margin: 0;
  }
  input, select{
    width: 60%;
  }
}
@media (max-width: 480px) {
  input,
  select{width: 100%;}
  input[type="radio"],
  input[type="checkbox"],
  input[type="submit"]{
  width: auto;
  }
  form .field-group{
  display: flex;
  flex-direction: column;
  margin: 0 0 6px 0;
  }
  form .field-group .label{
  padding: 0 0 5px 0;
  margin: 10px 0 0 0;
  }
}

 <header>
    <h1>Forms</h1> 
    <h2>Responsive HTML5 form elements with CSS Flexbox</h2>
 </header>
 <form action="#">  
 <!--///////////////// TEXT FIELDS ///////////////////-->        
   <div class="field-group">
     <label for="text1" class="label">Full Name:</label>
     <div class="field">
       <input name="text1" id="text1"  type="text"  value="" required>
     </div>
   </div>

   <div class="field-group">
     <label for="email1" class="label">Email:</label>
     <div class="field">
       <input name="email1" id="email1" type="email" spellcheck="false"  value="" required> 
     </div>
   </div>

   <div class="field-group">
     <label for="number1" class="label">Age:</label>
     <div class="field">
       <input name="number1" id="number1" type="number" value=""> 
     </div>
   </div>

   <div class="field-group">
     <label for="url1" class="label">Website URL:</label>
     <div class="field">
       <input name="url1" id="url1" type="url" value=""> 
     </div>
   </div>

   <div class="field-group">
     <label for="tel1" class="label">Phone:</label>         
     <div class="field">
       <input name="tel1" id="tel1" type="tel" value="">
     </div>
   </div>

   <div class="field-group">
     <label for="date1" class="label">Birthday:</label>         
     <div class="field">
       <input name="date1" id="date1" type="datetime-local" value="">
     </div>
   </div>

   <!--///////////////// TEXTAREA ///////////////////-->
   <div class="field-group">
     <label for="textarea1" class="label">Description:</label>         
     <div class="field">
       <textarea id="textarea1" name="textarea1" spellcheck="true" rows="10" cols="50"></textarea>
     </div>
   </div>

   <!--///////////////// SELECT MENU ///////////////////-->
   <div class="field-group">
     <div class="label">Multiple choice:</div>
     <div class="field">        
       <select id="select1" name="select1"> 
         <option value="First Choice">First Choice</option>
         <option value="Second Choice">Second Choice</option>
         <option value="Third Choice">Third Choice</option>
       </select>
     </div> 
   </div>

   <!--///////////////// RADIO GROUP ///////////////////-->
   <div class="field-group">
     <div class="label">Single choice:</div>

     <div class="field">
       <div>
         <input id="radio1" name="radio" type="radio" value="First Choice" checked="checked">
         <label for="radio1">First Choice</label>
       </div>
       <div>     
         <input id="radio2" name="radio" type="radio" value="Second Choice">
         <label for="radio2">Second Choice</label>
       </div>

       <div>
         <input id="radio3" name="radio" type="radio" value="Third Choice">
         <label for="radio3">Third Choice</label>
       </div>
     </div>

   </div>
   <!--///////////////// CHECKBOX GROUP ///////////////////-->
   <div class="field-group">
     <div class="label">Multiple choice:</div>

       <div class="field">
         <div>
           <input id="check1" name="check1" type="checkbox" value="First Choice">
           <label class="check" for="check1">First Choice</label>
         </div>
         <div>
           <input id="check2" name="check2" type="checkbox" value="Second Choice">
           <label class="check" for="check2">Second Choice</label>
         </div>
         <div>
           <input id="check3" name="check3" type="checkbox" value="Third Choice">
           <label class="check" for="check3">Third Choice</label>
       </div>
     </div>
   </div>

   <!--///////////////// SUBMIT BUTTON ///////////////////-->
   <div class="field-group">
     <div class="field">
       <input id="saveForm" name="saveForm" type="submit" value="Submit">
     </div>
   </div>

 </form>