Form side-by-side breaking line in Bootstrap 3 - css

Question

Trying to show a form side-by-side without success:
https://jsfiddle.net/eo6srkjr/
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-10">
<form action="#" role="form" method="post">
<a class="btn btn-danger btn-xs">Option 1</a>
</form>
<form action="#" role="form" method="post">
<a class="btn btn-success btn-xs">Option 2</a>
</form>
</div>
</div>
</div>
</div>
Any thoughts on it? Thanks

Answer 1

If you are looking to make both button side by side I have done so here
https://jsfiddle.net/eo6srkjr/6/
Add this to CSS
#test{
float: left;
}
#test2{
float: left;
}
Add a div to each button you want to style. Like this
<div id="test">
<form action="#" role="form" method="post">
<a class="btn btn-danger btn-xs">Option 1</a>
</form>
</div>
<div id="test2">
<form action="#" role="form" method="post">
<a class="btn btn-success btn-xs">Option 2</a>
</form>
</div>
If this is not the effect desired, let me know and ill help you accordingly.
Then just style each div accordingly to make it positioned exactly as you want.