How to set a few items in a line - html

Question

There a few HTML elements that I want to put in a line. This is the code I have used.
<input type = "text" className="search" placeholder="Search"></input>
<a href="/">
<img src="logo.svg"></img>
<h3>NameOfTheWebsite</h3>
</a>
SignIn
SignOut
But the output for this code is like this.
I want to put those elements in the same line and the logo should be top of the website name. How do I achieve this?

Answer 1

FlexBox is a really useful thing in such situations. In the following snippet, I have used some flexboxes just to get you familiar with it. But this is something that you should definitely master and use in your CSS layouts. MDN Web docs have a really great tutorial for that.
.home-page{
display:flex;
margin:15px;
}
.controls{
display:flex;
justify-content:space-between;
align-items:center;
}
.signing-buttons{
display:flex;
}
.signing-buttons a{
margin:5px;
padding:10px;
border:2px solid red;
border-radius:4px;
}
<a class="home-page" href="/">
<h3>NameOfTheWebsite</h3>
<img src="logo.svg"></img>
</a>
<div class="controls">
<input type = "text" className="search" placeholder="Search"></input>
<div class="signing-buttons">
SignIn
SignOut
</div>
</div>

Answer 2

You can use flexbox to achieve this. Just a minimalistic example to illustrate my point is shown below. You can control how much space each item will occupy and a lot of other things.
.row {
display:flex;
}
.search {
flex:1;
border:1px solid black
}
.name {
flex:1;
border:1px solid black
}
<div class='row'>
<div class='search'>Search Box</div>
<div class = 'name'>Name</div>
</div>
<div class='row'>Next line</>