* {
  box-sizing: border-box;
}

/* Search bar */

div.input-group {
  padding: 10px 20px;  
}

@media only screen and (min-width: 600px) {
  div.input-group {
    width: 600px;
    margin: auto;
    padding: 20px 0px 20px 0px;
  }
} 

div.input-group form {
  /* This bit sets up the horizontal layout */
  display:flex;
  flex-direction:row;
  
  /* This bit draws the box around it */
  border: thin solid #D8D8D8;
  /* I've used padding so you can see the edges of the elements. */
  /*padding:2px;*/
  height: 40px;
  border-radius: 10px;
}

div.input-group input {
  /* Tell the input to use all the available space */
  flex-grow:2;
  /* And hide the input's outline, so the form looks like the outline */
  font-size: 17px;
  border:none;
  border-radius: 9px 0px 0px 9px;
  padding: 10px;
  margin: 0;
}

div.input-group input:focus{
  outline: none;
}

div.input-group button {
  /* Just a little styling to make it pretty */
  margin: 0;
  border: 0;
  font-size: 17px;  
  color: white;
  background: orange;
  width: 50px;
  border-radius: 0px 9px 9px 0px;
}

div.input-group button:hover {
  background: #ccc;
}