how to add button inside input in joomla - html

Question

This is how my input and button looks like. The CSS code looks like this:
button._searchfrontpage
{
margin: 0 auto;
background: #333;
height: 53px;
width: 70px;
border-radius: 6px;
line-height: normal;
color: #eee;
font-weight: 400;
letter-spacing: 2px;
border: 0px;
display: block;
font-size: 18px;
}
.sp-module_searchfrontpage input[type="text"] {
background: #f0dbc5;
height: 53px;
width: 50%;
margin: 0 auto;
border-radius: 6px;
margin-bottom: 40px;
line-height: normal;
color: #444;
font-weight: 400;
letter-spacing: 2px;
border: 0px;
display: block;
}
I dont seem to figure out a way to drag the grey button into the right side of my input box. Are there someone who can figure me an idea to work from?
EDIT: after implementing the code #Jai gave me, it looks fine, but when i make the browser smaller, it gets out of its place and looks like this:
Obviously its like that, because the input width is 50%. are there any solutions for that?

Answer 1

For your div:
.sp-module_searchfrontpage{
/* other CSS as is*/
position: relative;
}
Now the button:
button._searchfrontpage {
background: #333;
height: 53px;
width: 70px;
border-radius: 6px;
line-height: normal;
color: #eee;
font-weight: 400;
letter-spacing: 2px;
border: 0px;
display: block;
font-size: 18px;
/* add these properties */
position: absolute;
top:0;
right:0;
z-index:100; /* <=====choose the correct value*/
}
But you have to make sure that the parent div has same height as the input and button does and relatively positioned.
If it is not possible then you can wrap them into another div or better with label and style it with same height property of the input and button but the div still needs the relative position and button should be absolutely positioned. I would do it with label:
<label>
<input type="text" />
<button>search</button>
</label>
Then in the CSS:
.sp-module_searchfrontpage label{
width: 100%;
height: 53px;
position: relative;
}
button._searchfrontpage {
background: #333;
height: 53px;
width: 70px;
border-radius: 6px;
line-height: normal;
color: #eee;
font-weight: 400;
letter-spacing: 2px;
border: 0px;
display: block;
font-size: 18px;
/* add these properties */
position: absolute;
top:0;
right:0;
z-index:100; /* <=====choose the correct value*/
}