Why is my search button below my search bar - html

Question

I am making a search bar for an idea of mine and I'm still very new to CSS.
My search button is below my text bar and my on hover button and I can't figure out the solution or find the reason why!
I have tried changing the margins, padding, and top/bottom percentages but to no avail
HTML
<div class="search-box">
<div class="location">
<input name="location" type="text"
placeholder="location"/>
</div>
<div class="dropdwn">
<button class="dropbtn">dropdown</button>
<div class="dropdwn-content">
<img src="../Media/sunny.png" alt="Sunny"
width="50" height="50">
<img src="../Media/partly_cloudy.png"
alt="partly_cloudy" width="50"height="50">
<img src="../Media/rain_s_cloudy.png" alt="rain_s_cloudy"
width="50"height="50">
</div>
</div>
<div class="searchbtn">
<button type="button">Search</button>
</div>
</div>
CSS
.search-box
{
width: 40%;
box-sizing: border-box;
border-radius: 3px;
border-style: solid;
position: absolute;
left: 35%;
top: 20%;
}
.location input
{
box-sizing: inherit;
width: 50%;
float:left;
}
.dropdwn
{
position: relative;
display: inline-block;
}
.searchbtn button
{
float: right;
}
.dropdwn-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
I am expecting my searchbtn to be top right of the box instead of the bottom right

Answer 1

When using display: inline-block, the whitespace matters. This can mess up %-based layouts and indentation a bit (see below).
The other issue I see is with your rules around setting input width, as this will affect the child element instead -- telling it to fill 50% of .location instead of .search-box.
I've simplified your code to highlight these changes, and added some %'s so that the input and buttons will stretch (or shrink) to fill their parents, who will in turn fill .search-box. A simple float: right on the .searchbtn element now sends it to the right, without a new line.
* {
box-sizing: border-box;
}
.search-box
{
box-sizing: border-box;
border-radius: 3px;
border-style: solid;
left: 35%;
top: 20%;
width: 60%;
}
.search-box > div {
display: inline-block;
}
.search-box button, input {
width: 100%;
}
.location {
width: 50%;
}
.searchbtn {
float: right;
}
<div class="search-box">
<div class="location">
<input name="location" type="text" placeholder="location"/>
</div><div class="dropdwn">
<button class="dropbtn">dropdown</button>
</div><div class="searchbtn">
<button type="button">Search</button>
</div>
</div>