make the search bar input on a same line with the website logo and login button?

How i can push the search bar to the top?

I want to make it in the same line with the Iread logo

I tried (margin-top 0px) and margin-bottom but not work

form.sbar input[type=text] {

  margin-top: 0px;
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  width: 50%;
  background: #f1f1f1;
}

form.sbar button {
  margin-top:0px;
  width: 10%;
  padding: 10px;
  background: #2196F3;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
}

form.sbar button:hover {
  background: #0b7dda;
}

form.sbar::after {
  content: "";
  clear: both;
  display: table;
}

<center>
	   <div>	
	     <form class="sbar">
		  <input type="text" placeholder="Search.." name="search">
		  <button type="submit"><i class="fa fa-search"></i></button>
   	     </form>
	  </div>
</center>

the image is in div and the search form in div and they both in parent div

enter image description here

Answer

You have just to control the parent div with some css rules use the css flex rule your parent div css would be something like this :

.parentCssClass{display:flex;flex-direction:row;align-items:center;}