Float div left and button right - html

Question

Please note: I have looked at several SO posts and various suggestions for floating 2 divs side by side, however none of them seemed to work for me.
A summary of suggestions are:
display: inline-block
float: left
others refer to overflow: hidden, overflow: auto with various implementations.
One had worked, required me to set the right div:
position: absolute;
right: 0px
This was undesireable since the button would attach itself the the right side, ignoring all parent container constraints.
Above is that what I want to achieve.
The left div has the blue background. The right div contains the button.
My code:
Html
<div class="row">
<div class="display-inline-block float-left">
<h1>Your Order Schedule
<a id="editScheduleName" onclick="changeScheduleName()">
<img class="schedule-heading small-image" src=""images/icons/edit.png">
</a>
</h1>
</div>
<div class="display-inline-block float-right">
<input id="btnScheduleStatus" type="button" class="btn button-status btn-success" value="my button">
</div>
</div>
Css
Note:using a basis of bootstrap for most of my css needs
.display-inline-block {
display: inline-block;
}
.schedule-heading {
position: relative;
}
.small-image {
width: 30px;
height: 30px;
margin-bottom: 5px;
}
.button-status {
width: 120px;
height: 50px;
font-weight: bold;
font-size: 18px;
}
Help would be very much appreciated

Answer 1

Without any changes to css, purely using bootstrap:
Few key things: ensure you add columns (<div class="col-md-12">) after specifying <div class="row">
You can use the pull-left & pull-right classes to float the content:
<div class="row">
<div class="col-md-12"><!-- define columns in bootstrap -->
<div class="pull-left"><!-- use pull-left -->
<h1>
Your Order Schedule
<a id="editScheduleName" onclick="changeScheduleName()">
<img class="schedule-heading small-image" src="images/icons/edit.png">
</a>
</h1>
</div>
<div class="pull-right"><!-- use pull-right -->
<input id="btnScheduleStatus" type="button" class="btn button-status btn-success" value="my button">
</div>
</div>
</div>
Fiddle
This has better overall browser support than display:flex which is not supported in older versions of Internet Explorer.

Answer 2

.row{
display: flex;
justify-content: space-between;
align-items: center;
}
.display-inline-block {
display: inline-block;
}
.schedule-heading {
position: relative;
}
.small-image {
width: 30px;
height: 30px;
margin-bottom: 5px;
}
.button-status {
width: 120px;
height: 50px;
font-weight: bold;
font-size: 18px;
}
<div class="row">
<div class="display-inline-block float-left">
<h1>Your Order Schedule
<a id="editScheduleName" onclick="changeScheduleName()">
<img class="schedule-heading small-image" src="images/icons/edit.png"/>
</a>
</h1>
</div>
<div class="display-inline-block float-right">
<input id="btnScheduleStatus" type="button" class="btn button-status btn-success" value="my button">
</div>
</div>
.row{
display: flex;
justify-content: space-between;
align-items: center;
}
Try to use display: flex!
You can search in Google, you can learn display: flex easily.

Answer 3

First, you need to create a container div for both your buttons, and then have them inside as 2 divs. Then you can write in your CSS:
.button_container {
display: flex;
justify-content: space-between;
align-items: center;
}
You don't need to write anything for the other 2 divs.