Align Button to right of progress bar

Question

Can anybody please help me align the Cancel button to the right of the progress bar? I've tried float and display inline with no success, and I'm out of ideas.

Here's the code:

<div class="row">
  <div class="progress progress-striped active" style="width: 500px; margin: 0px auto; height: 40px;">
    <div id="progressbar" class="progress-bar progress-bar-success" role="progressbar" style="width:20%;"></div>
  </div>
  <div style="display: inline;"><button class="btn btn-warning">Cancel</button></div>
</div>

Here's a fiddle of it demonstrating my problem:

Answer 1

Try to this Define pull-left of your div as like this

<br><br><br>
<div class="row">
  <div class="progress progress-striped active pull-left" style="width: 500px; margin: 0px auto; height: 40px; margin-right:10px;"><div id="progressbar" class="progress-bar progress-bar-success" role="progressbar" style="width:20%;"></div></div>

    <button class="btn btn-warning pull-left">Cancel</button>

</div>

Demo

Answer 2

I added float:left to both the loading bar and the cancel button, plus some slight css to align the cancel button better such as top and left:

UPDATED EXAMPLE