How to make a submit button stand next to a search input - html

Question

I wonder if i can put a submit button inside a search input, in the right side. I tried using float: right however doesn't work.
Codepen: http://codepen.io/celicoo/pen/XbKYyY
HTML:
<section class="search">
<div class="search__container">
<div class="search__row">
<div class="col-lg-12">
<div class="search__box">
<h2 class="search__title">Procurando por: Nome de ...</h2>
<form class="search__form" action="#" method="get">
<input class="search__input" type="text" placeholder="Busque um Crawler.." />
<button class="search__submit" type="submit">Procurar</button>
</form>
</div>
</div>
</div>
</div>
</section>
CSS:
.search {
color: #676a6c;
margin-top: 25px;
&__row {
margin-left: -15px;
margin-right: -15px;
overflow: hidden;
}
&__box {
background: #FFFFFF;
padding: 10px;
}
&__form {
margin-top: 10px;
}
&__input {
background-color: #FFFFFF;
background-image: none;
border: 1px solid #e5e6e7;
border-radius: 1px;
color: inherit;
display: block;
padding: 12px;
width: 100%;
font-size: 14px;
outline: none;
}
&__input:focus {
border: 1px solid #E97228;
}
&__submit {
background-color: #E97228;
border-color: #E97228;
color: #FFFFFF;
border: 1px solid transparent;
outline: none;
}
}
I was trying to use float right like i said, but isn't work, the float will only push the submit button to the right, but not inside the input.

Answer 1

Your input for .search__input has a width of 100% so nothing can actually go beside it.
You need to make the width less than 100% and add float:left;
Example:
.search__input{width:50%; float:left;}

Answer 2

I assume you are trying to have the submit button 'inside' the input... or overlapping it.
You need to create a wrapping div around the input and submit with position: relative;, and then give the submit button a position: absolute; and a top and right value.

Answer 3

I added display: inline & have placed your search bar inside a container.
Try this css:
.search {
color: #676a6c;
margin-top: 25px;
&__row {
margin-left: -15px;
margin-right: -15px;
overflow: hidden;
}
&__box {
background: #FFFFFF;
padding: 10px;
}
&__form {
margin-top: 10px;
}
&__input {
background-color: #FFFFFF;
background-image: none;
border: 1px solid #e5e6e7;
border-radius: 1px;
color: inherit;
display: block;
padding: 12px;
width: 50%;
font-size: 14px;
outline: none;
display: inline;
margin:0px;
}
&__input:focus {
border: 1px solid #E97228;
}
&__submit {
background-color: #E97228;
border-color: #E97228;
color: #FFFFFF;
border: 1px solid transparent;
outline: none;
padding: 12px;
margin:0px;
}
&__container {
width: 250px;
}
}