<form id="tfnewsearch" class="tfnewsearch" method="get" action="http://www.google.com">
  <div class="tfheader">
    <label class="mylabel" for="searchinput">Find</label>
    <input type="search" id="searchinput" class="tftext tftextinput1" name="q" maxlength="120" placeholder="Search our website">
    <label class="mylabel" for="cityinput">Near</label>
    <input type="search" id="cityinput" class="tftext tftextinput2" name="q" maxlength="120" placeholder="city">
    <button type="submit" class="tfbutton2"><i class="fa fa-search"></i></button>
  </div>
</form>
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
.tfnewsearch {
  background-color: #c3dfef;
  padding: 10px 0;
  margin: 1rem;
  font-size: 1.4rem;
 	font-family: Arial, Helvetica, sans-serif;
}
.tfnewsearch * {
  font-size: inherit;
} 
.tfheader {
  max-width: 1180px;
  padding: 0 10px;
  margin: auto;
  display: flex;
  border-radius: 4px;
}
.tftext {
  margin: 0;
  padding: 5px 10px;
  color: #666;
  border: 1px solid #0076a3;
  border-left-style: none;
  border-right-style: none;
}
.tftext {
  flex: 1 0 0%;
}
.tfbutton2 {
  min-width: 50px;
  margin: 0;
  padding: 5px 0;
  background: #2196f3;
  color: white;
  border: 1px solid grey;
  border-left: none; /* Prevent double borders */
  cursor: pointer;
  border-radius: 0 5px 5px 0;
}
.mylabel {
  display: flex;
  align-items: center;
  padding: 0 20px 0 10px;
  border: 1px solid #0076a3;
  background: #fff;
}
.mylabel:first-child {
  border-radius: 5px 0 0 5px;
}
.tfbutton2:hover {
  background: #007ead;
  background: linear-gradient(#0095cc, #00678e);
}
@media screen and (max-width: 700px) {
  .tfheader {
    flex-wrap: wrap;
  }
  .tfheader > * {
    border-radius: 0;
    flex: 1 0 100%;
  }
  .tfheader .mylabel {
    border: none;
    background: transparent;
    margin: 0 0 3px;
  }
  .tftext {
    border: 1px solid #0076a3;
    margin: 0 0 10px;
  }
  .tfbutton2 {
    max-width: 100px;
    margin: 10px auto;
    border-radius: 5px;
    padding: 10px;
  }
}
$(function() {
  $("#searchinput").click(function() {
    if ($("#searchinput").val() == "Search our website") {
      $("#searchinput").val("");
    }
  });
  $("#cityinput").click(function() {
    if ($("#cityinput").val() == "city") {
      $("#cityinput").val("");
    }
  });
});
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js