Button not sticking next to field - html

Question

I'm trying to position my button so it sticks next to the input field.
Like here:
In the example i just showed there, the button had a position relative and a float right. I did the exact same thing but it didn't work.
Here is my fiddlesticks:
.subscribe input {
font: 15px/25px Georgia, Times, 'Times New Roman', serif;
border: 2px solid black;
height: 40px;
width: 340px;
font-style: italic;
padding-left: 10px;
}
.subscribe button {
height: 40px;
width: 53px;
background-color: black;
color: white;
padding-left: 10px 10px 10px 10px;
float: right;
position: relative;
border: 2px solid black;
}
.textboxwhite-left {
padding: 40px 20px 0px 20px;
color: black;
text-align: left !important;
}
#container {
display: block;
height: 900px;
width: 100%;
position: relative;
top: 50px;
margin: 0;
color: white;
text-align: center;
}
<div id="container">
<div class="textboxwhite-left">
<form class="subscribe" action="" method="post">
<input type="text" name="subscribefield" required="true" placeholder="Awe" />
<button type="submit">Search</button>
</form>
</div>
</div>

Answer 1

Does this works for you?
.subscribe{ display:inline-block;}

Answer 2

Please check this code.
.subscribe input {
font: 15px/25px Georgia, Times, 'Times New Roman', serif;
border: 2px solid black;
height: 40px;
width: 340px;
font-style: italic;
padding-left: 10px;
float: left;
}
.subscribe button {
height: 46px;
width: 80px;
background-color: black;
color: white;
padding-left: 10px 10px 10px 10px;
float: left;
position: relative;
border: 2px solid black;
}
.textboxwhite-left {
padding: 40px 20px 0px 20px;
color: black;
text-align: left !important;
}
#container {
display: block;
height: 900px;
width: 100%;
position: relative;
top: 50px;
margin: 0;
color: white;
text-align: center;
}
<div id="container">
<div class="textboxwhite-left">
<form class="subscribe" action="" method="post">
<input type="text" name="subscribefield" required="true" placeholder="Awe" />
<button type="submit">Search</button>
</form>
</div>
</div>

Answer 3

added display:inline-block to .textboxwhite-left and adjusted height and width of button according to input.
.subscribe input {
font: 15px/25px Georgia, Times, 'Times New Roman', serif;
border: 2px solid black;
height: 40px;
width: 340px;
font-style: italic;
padding-left: 10px;
}
.subscribe button {
height: 46px;
width: 58px;
background-color: black;
color: white;
padding-left: 10px 10px 10px 10px;
float: right;
position: relative;
border: 2px solid black;
}
.textboxwhite-left {
padding: 40px 20px 0px 20px;
color: black;
text-align: left !important;
display : inline-block;
}
#container {
display: block;
height: 900px;
width: 100%;
position: relative;
top: 50px;
margin: 0;
color: white;
text-align: center;
}
<div id="container">
<div class="textboxwhite-left">
<form class="subscribe" action="" method="post">
<input type="text" name="subscribefield" required="true" placeholder="Awe" />
<button type="submit">Search</button>
</form>
</div>
</div>

Answer 4

Try this:
<div class="search">
<form>
<input type="text" placeholder="serach here">
<input class="submit" value="Seach">
</form>
</div>
Css:
.search{
position:relative;
padding:0px 100px 10px 10px;
}
.search input[type="text"]{
border:2px solid black;
border-radius:3px;
width:100%;
height:30px;
line-height:30px;
display:block;
}
.search input[type="text"]:focus{
-webkit-appearance: none;
appearance: none;
outline:none;
}
.search .submit{
position:absolute;
width:100px;
height:30px;
text-align:center;
right:0;
border:2px solid black;
top:0;
cursor: pointer;
}
.search .submit:hover{
background:black;color:#fff;
}
Here is jsfiddle link : https://jsfiddle.net/jmc548vc/1/

Answer 5

Please do have a look at this Fiddle.
.subscribe button {
height: 46px;
width: 53px;
background-color: black;
color: white;
padding-left: 10px 10px 10px 10px;
float: right;
position: absolute; \\this is changed to absolute
border: 2px solid black;
}