body {





  font-family: Arial;





}











* {





  box-sizing: border-box;





}











form.example input[type=text] {





  padding: 10px;





  font-size: 17px;





  border: none;





  float: left;





  width: 125px;





  background: transparent;





  -webkit-transition: width 0.4s ease-in-out;





  transition: width 0.4s ease-in-out;





}





form.example button {





  float: left;





  width: 3%;





  padding: 10px;





  background: transparent;





  color: #636669;





  font-size: 17px;





  border: none;





  cursor: pointer;


  


  opacity:1;


  


  transition-duration:0.5s;





}











form.example button:hover {





  opacity:0.7;


  


  transition-duration:0.5s;





}











form.example::after {





  content: "";





  clear: both;





  display: table;





}





form.example input[type=text]:focus {





  width: 25%;





}





@media screen and (max-width:600px){


  form.example input[type=text] {





  padding: 10px;





  font-size: 17px;





  border: none;





  float: left;





  width: 85px;





  background: transparent;





  -webkit-transition: width 0.4s ease-in-out;





  transition: width 0.4s ease-in-out;





}


  form.example input[type=text]:focus {





  width: 35%;





}


}