HTML / locate button and text in the same line - html

Question

I have two element in my HTML code. One, is a text:"Machine" and the other is a button which need to be in the right panel (but in the sane line..).
<div class="panel panel-default">
<div class="panel-heading" style="align: center"> <strong class="">Machine</strong>
<div ng-show="app[11]">
<button style="float: right;" class="btn btn-sm btn-primary btn-danger" type="submit" ng-click="submitForm11(app[1])">Delete</button>
</div>
</div>
For some reason, the button appear beneath the text, and not beside it.
What can be the reason?
Edit:
I change it to the next code, after the answer suggestion:
<div class="panel panel-default">
<div class="panel-heading" style="align: center;"> <strong class="">Machine</strong>
<div style="float: right;" ng-show="app[11]">
<button class="btn btn-sm btn-primary btn-danger" type="submit" ng-click="submitForm11(app[1])">Delete</button>
</div>
</div>
It's still gives me the same result:
I close the first <div> later.

Answer 1

you didn't close your first div.
<div class="panel panel-default">
<div class="panel-heading" style="align: center; float:right;">
<strong class="">Machine</strong>
</div>
<div style="float:right;" ng-show="app[11]">
<button class="btn btn-sm btn-primary btn-danger" type="submit" ng-click="submitForm11(app[1])">Delete</button>
</div>
</div>
and now you can change line-height of the text div to have a better position beside your button.

Answer 2

Don't float anything. dive both divs inside panel-default display:inline-block; vertical-align:middle; and it will center them on the same horizontal line.
.panel-default{
> *{ display:inline-block; vertical-align:middle; }
}

Answer 3

You could put the <button> along with its surrounding <div> inside the <div class="panel-heading"> and move the float property from <button> to <div>, like so:
<div class="panel panel-default">
<div class="panel-heading" style="align: center;"> <strong class="">Machine</strong>
<div style="float: right;" ng-show="app[11]">
<button class="btn btn-sm btn-primary btn-danger" type="submit" ng-click="submitForm11(app[1])">Delete</button>
</div>
</div>
</div>
http://jsfiddle.net/n6tp90s7/
Your code was missing one closing </div>, so I am not sure if that was your intention from the start.

Answer 4

<div id="box">Machine<div id="button">delete</div></div>
and css:
#box {width:200px; height:40px; line-height:40px; padding-left:5px;}
#button {width:70px; height:36px; float:right; margin:2px 5px; background:#ff0000;}
with this, you'll get the result you want. And you can add the codes you didn't write...