the button needs to go beside the text

Question

I can't seem to get the button to position to the right of the text. How do I get the button to align beside the text on the right side. I'm using HTML5, CSS3 and bootstrap. I have posted pics of what it looks like and what I'm trying to get it to look like

.background-wrap {
  position: absolute;
  width: auto;
  top: 0%;
  left: 30%;
  z-index: 100;
  padding: 5px;
  margin-top: 0px;
}
#hero-area {
  background-size: cover;
  background-attachment: scroll;
  color: #fff;
  position: relative;
  background-position: center;
  overflow: hidden;
  height: 100vh;
  overflow: hidden;
}
#hero-area:before {
  content: '';
  z-index: 9;
  background: rgba(255, 255, 255, 0.54);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  height: 100vh;
}
.vid-text {
  font-size: 250%;
  color: #1c1c1c;
  font-weight: 300;
  text-transform: none;
  line-height: 1;
  letter-spacing: .5px;
}
.text-one {
  color: #00bfff;
  font-size: 100%;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .5px;
}
.btn-full {
  color: #1c1c1c;
  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: #00bfff;
  letter-spacing: .5px;
  font-size: 16px;
}
.btn-full:hover,
.btn-full:active {
  border: 1px solid #00bfff;
  background-color: #fff;
  color: #00bfff
}

<section id="hero-area">
  <video id="bgvid-m" autoplay loop>
    <source src="video/m%20Video%20header.oggtheora.ogv" />
    <source src="video/m%20Video%20header.mp4.mp4" />
  </video>

  <div class="background-wrap">
    <div class="row">
      <div class="col-md-12">
        <div class="block wow fadeInUp" data-wow-delay=".3s">

          <h5 class="vid-text">
    <span class="text-one"></span>
    <div class="col-xs-6">
    <a class="btn-full" href="#">Discover</a>  
    </div>
    </h5>

        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

I changed this: TEST TEST Discover

added this to the button btn-mat display: inline-block;

<section id="hero-area" >

<video id="bgvid-m" autoplay loop>
<source src="video/Matrix%20Video%20header.oggtheora.ogv"/>

<source src="video/Matrix%20Video%20header.mp4.mp4"/>


</video>

<div class="background-wrap">
<div class="row">
<div class="col-md-12">
<div class="block wow fadeInUp" data-wow-delay=".3s">

<span class="vid-text">TEST
<span class="text-one">TEST</span>
<a class="btn-mat" href="#">Discover</a>  
</span>
</div>
</div>
</div>
</div>
</section>

CSS

.btn-mat {
display: inline-block;
color: #1c1c1c;
padding: 20px 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: #00bfff;
letter-spacing: .5px;
font-size: 18px;  
margin-left: 15px;}


#hero-area {
position: absolute;
background-size: cover;
background-attachment: scroll;
color: #fff;
position: relative;
background-position: center;
overflow: hidden;
height: 100vh;
overflow: hidden;}

#hero-area:before {
content: '';
z-index: 9;
background: rgba(255, 255, 255, 0.54);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
height: 100vh;}


.vid-text {
font-size: 250%;
color: #1c1c1c;
font-weight: 300;
text-transform: none;
line-height: 1;
letter-spacing: .5px;}

text-one {
color: #00bfff;
font-size: 100%;
font-weight: 500;
line-height: 1;
letter-spacing: .5px;}

Answer 2

use this

<section id="hero-area">
  <video id="bgvid-m" autoplay loop>
    <source src="video/m%20Video%20header.oggtheora.ogv" />
    <source src="video/m%20Video%20header.mp4.mp4" />
  </video>

  <div class="background-wrap">
    <div class="row">
      <div class="col-md-12">
        <div class="block wow fadeInUp" data-wow-delay=".3s">
        <div id="h5">
          <h5 class="vid-text">The Matrix 
            <span class="text-one">Puts You In Control</span>
            </h5>
        </div>
        <div class="col-xs-6 btn-full">
           <a  href="#">Discover</a>  
       </div>
        </div>
      </div>
    </div>
  </div>
</section>

and css

.background-wrap {
  position: absolute;
  width: auto;
  top: 0%;
  left: 30%;
  z-index: 100;
  padding: 5px;
  margin-top: 0px;
}
#hero-area {
  background-size: cover;
  background-attachment: scroll;
  color: #fff;
  position: relative;
  background-position: center;
  overflow: hidden;
  height: 100vh;
  overflow: hidden;
}
#hero-area:before {
  content: '';
  z-index: 9;
  background: rgba(255, 255, 255, 0.54);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  height: 100vh;
}
.vid-text {
  font-size: 250%;
  color: #1c1c1c;
  font-weight: 300;
  text-transform: none;
  line-height: 1;
  letter-spacing: .5px;
}
.text-one {
  color: #00bfff;
  font-size: 100%;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .5px;
}
.btn-full {
  color: #1c1c1c;
  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: #00bfff;
  letter-spacing: .5px;
  font-size: 16px;
}
.btn-full:hover,.btn-full:active {
  border: 1px solid #00bfff;
  background-color: #fff;
  color: #00bfff
}
#h5
{
    float:left;
}
h5
{
    margin:0px;
}
.col-xs-6
{
    float:right;
}
.block:after
{
        display: block;
    content: '.';
    clear: both;
    visibility: hidden;
    height: 0px;
}
a 
{
    color:#000;
    text-decoration:none;
}

Answer 3

Div elements are display:block by default. This means that they "don't like stuff being put beside them". Making these inline-block should allow for this. Lastly, You will also need to "force on the same line" instead of wrapping the content, and so add:

.row, .col-xs-6 {
  display: inline-block;
  white-space: nowrap;
} 

to your CSS should allow this.

.background-wrap {
  position: absolute;
  width: auto;
  top: 0%;
  left: 30%;
  z-index: 100;
  padding: 5px;
  margin-top: 0px;
}
#hero-area {
  background-size: cover;
  background-attachment: scroll;
  color: #fff;
  position: relative;
  background-position: center;
  overflow: hidden;
  height: 100vh;
  overflow: hidden;
}
#hero-area:before {
  content: '';
  z-index: 9;
  background: rgba(255, 255, 255, 0.54);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  height: 100vh;
}
.vid-text {
  font-size: 250%;
  color: #1c1c1c;
  font-weight: 300;
  text-transform: none;
  line-height: 1;
  letter-spacing: .5px;
}
.text-one {
  color: #00bfff;
  font-size: 100%;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .5px;
}
.btn-full {
  color: #1c1c1c;
  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: #00bfff;
  letter-spacing: .5px;
  font-size: 16px;
}
.btn-full:hover,
.btn-full:active {
  border: 1px solid #00bfff;
  background-color: #fff;
  color: #00bfff
}
.row,
.col-xs-6 {
  display: inline-block;
  white-space: nowrap;
}

<section id="hero-area">
  <video id="bgvid-m" autoplay loop>
    <source src="video/m%20Video%20header.oggtheora.ogv" />
    <source src="video/m%20Video%20header.mp4.mp4" />
  </video>

  <div class="background-wrap">
    <div class="row">
      <div class="col-md-12">
        <div class="block wow fadeInUp" data-wow-delay=".3s">

          <h5 class="vid-text">The Matrix 
    <span class="text-one">Puts You In Control</span>
    <div class="col-xs-6">
    <a class="btn-full" href="#">Discover</a>  
    </div>
    </h5>

        </div>
      </div>
    </div>
  </div>
</section>

Answer 4

You shoud chaneg the div with a span

<h5 class="vid-text">The Matrix 
   <span class="text-one">Puts You In Control</span>
   <span class="col-xs-6>
      <a class="btn-full" href="#">Discover</a>  
   </span>
</h5>