Arranging inputs within a form - html

Question

I am working on a website but I have a problem arranging input items.
This is what I want it to look like:
but it looks like this:
My HTML code:
<div id="search">
<form action="">
<input class="search-area" type="text" name="text" placeholder="Search here">
<input class="search-btn" type="submit" name="submit" value="SEARCH">
</form>
</div>
My CSS code:
#search{
width: 650px;
float: left;
padding: 20px;
margin-left: 50px;
}
.search-area{
width: 650px;
height: 50px;
background: #fff;
border: none;
border-radius: 10px;
float: left;
padding-left: 15px;
}
.search-btn{
width: 100px;
height: 50px;
border-radius: 10px;
border: none;
color:#fff;
background: brown;
margin-left: -100px;
}
Please help me to understand the problem.

Answer 1

Add position:relative to your main div, which is the #search.
Then add position:absolute to the button, and right:0 in order to align it to the right of the relative element.
#search{
position:relative;
}
.search-btn{
position:absolute;
right:0
}
Maybe you will also need a top positioning of the button. You can add top:5px for example to achieve that.
Cheers

Answer 2

To position the search-button above another element it has to be position: absolute.
Here you go:
body {
background: lightgreen;
}
#search {
position: relative;
width: 550px;
padding: 20px;
}
.search-area {
width: 550px;
height: 50px;
background: #fff;
border: none;
border-radius: 10px;
padding-left: 15px;
}
.search-btn {
position: absolute;
top: 20px;
right: 0;
width: 100px;
height: 52px;
border-radius: 10px;
border: none;
color: #fff;
background: brown;
}
<div id="search">
<form action="">
<input class="search-area" type="text" name="text" placeholder="Search here">
<input class="search-btn" type="submit" name="submit" value="SEARCH">
</form>
</div>