How do I get this button to go beside the email field - css

Question

How do I get the subscribe button to go beside the email field of the form.. and the hover doesn't seem to be working on the subscribe button
using bootstrap and HTML5 and CSS
<form class="subscribe_form">
<div class="subscrive_group wow fadeInUp">
<input class="form-control subscribe_mail" type="email" placeholder="Enter your email address">
<input class="btn-form" type="submit" value="Subscribe">
</div>
</form>
CSS
subscribe_form {
border: 1px solid #DDDDDD;
color: #CCCCC6;
font-family: 'Roboto', sans-serif;
font-size: 16px;
margin-top: 0;
outline: medium none;
width: 75%;
}
.subscribe_form .btn-form {
margin: 10px;
}
.btn-form {
color: #00bfff;
padding: 10px 30px;
font-weight: 500;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s, border 0.2s, color 0.2s;
border: 1px solid #00bfff;
background-color: #fff;
letter-spacing: .5px;
font-size: 16px;
}
.btn-form:hover,
.btn-form:active {
border: 1px solid #00bfff;
background-color: #fff;
color: #00bfff;}
heres what happened when I tried this below (image attached)
Here is the rest of the code for that section
<section class="works service-page">
<div class="container">
<h2 class="subtitle wow fadeInUp animated" data-wow-delay=".3s" data-wow-duration="500ms">TEXT </h2>
<p class="subtitle-des wow fadeInUp animated" data-wow-delay=".5s" data-wow-duration="500ms">
TEXT
</p>
<div class="row">
<div class="col-sm-4 ">
<figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
<figcaption>
<h2>
<a href="#" class="figma">
text</a> <span class="par-text-one">text</span>
</h2>
<p class="para">
text
</p>
</figcaption>
<div class="img-wrapper">
<img src="images/" class="img-responsive" alt="this is a title" >
<div class="overlay">
<div class="buttons">
<a target="_blank" href="">Discover</a>
</div>
</div>
</div>
<figcaption>
<p class="para">text
<br>
text
</p>
</figcaption>
</figure>
</div>
<div class="col-sm-4 ">
<figure class="wow fadeInLeft animated portfolio-item" data-wow-duration="500ms" data-wow-delay="0ms">
<figcaption>
<h2>
<a href="#" class="figma">
text </a> <span class="par-text-one">text </span>
</h2>
<p class="para">text
</p>
</figcaption>
<div class="img-wrapper">
<img src="images/.jpg" class="img-responsive" alt="this is a title" >
<div class="overlay">
<div class="buttons">
<a target="_blank" href="">Discover</a>
</div>
</div>
</div>
<figcaption>
<p class="para">text
<br>text
</p>
</figcaption>
</figure>
</div>
<div class="col-sm-4 boxed">
<h2> More Products Coming Soon! </h2>
<p class="para-form">
text
</p>
<p class="para-blue">text
</p>
<div class="container">
<form class="subscribe_form">
<div class="subscrive_group wow fadeInUp row col-sm-12">
<div class="col-sm-6">
<input class="form-control subscribe_mail" type="email" placeholder="Enter your email address">
</div>
<div class="col-sm-6">
<input class="btn-form" type="submit" value="Subscribe">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>

Answer 1

You can add the form-inline class on your <form> tag.
http://getbootstrap.com/css/#forms-inline.
<form class="subscribe_form form-inline">
<div class="subscrive_group wow fadeInUp">
<input class="form-control subscribe_mail" type="email" placeholder="Enter your email address">
<input class="btn-form" type="submit" value="Subscribe">
</div>
</form>

Answer 2

try this:
<form class="subscribe_form">
<div class="subscrive_group wow fadeInUp row col-sm-12">
<div class="col-sm-6">
<input class="form-control subscribe_mail" type="email" placeholder="Enter your email address">
</div>
<div class="col-sm-6">
<input class="btn-form" type="submit" value="Subscribe">
</div>
</div>
</form>