Heading row doesn't appear in one line - html

Question

I create a popup via javascript, below is the rendered html. I would like to have a headingrow containing the heading("Preisrechner") and both of the icons you see below. I can't really adjust them so that they are in one row. What should I do to get one row with heading and icons?
FIDDLE
<div style="display: table; top: 51px; right: 0px;" id="quickrechner" class="popup-wrapper">
<div class="my-popup-box">
<div class="my-popup-heading"><h5>Preisrechner</h5>
<div class="headingIcons">
<ul>
<li><i class="ion-ios-navigate-outline"></i></li>
<li><i class="ion-ios-close-empty"></i></li>
</ul>
</div>
</div>
<div class="my-popup-content">
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="row">
<div class="col-md-6 col-xs-12">
<div class="col-md-4"><label for="e">EK - Preis:</label></div>
<div class="col-md-8"><input class="buyIn" id="e" type="text"></div>
</div>
<div class="col-md-6 col-xs-12">
<div class="col-md-4"><label for="d">EK - Preis:</label></div>
<div class="col-md-8"><input class="buyIn" id="d" type="text"></div>
</div>
</div>
</div>
</div>
</div>
</div>
.popup-wrapper{
display:none;
position:absolute;
top:51px;
background:#bdbdbd;
z-index:10
}
.my-popup-box{
display:table-cell;
line-height:18px
}
.my-popup-heading{
width:100%;
padding-left:5px;
float:left;
}
.my-popup-heading i{
font-size:1.1em;
font-weight:700;
margin:0 8px;
position: relative;
float:right;
}
.my-popup-heading .heading-icons{
position:absolute;
right:10px
}
.my-popup-content{
margin-left:auto;
margin-right:auto;
width:100%;
padding:9px
}
DESIRED RESULT:

Answer 1

You seem to be using bootstrap, so one solution would be this:
<div class="my-popup-heading"><h5 class="pull-left">Preisrechner</h5>
<div class="headingIcons">
<ul class="list-inline pull-right">
<li><i class="ion-ios-navigate-outline"></i></li>
<li><i class="ion-ios-close-empty"></i></li>
</ul>
</div>
</div>
In basic you can give the icons and the heading different floats to achieve you desired outcome. .pull-right and .pull-left are the bootstrap classes to give floats.
Updated Fiddle

Answer 2

I created a JSfiddle with the simple changes you desired.
Here are the critical CSS changes:
.my-popup-heading h5{
display: inline-block;
width: 45%;
float: left;
}
.headingIcons ul li{
display: inline;
}
.my-popup-heading .heading-icons{
display: inline-block;
float:right;
width:45%;
}
In order to have block level elements (<h5>, <ul>) on the same line, you have to use a display type such as inline or inline-block. And to have <li> on the same line, you have to use display:inline.
If I misunderstood, comment below.

Answer 3

Try it with:
ul {
float: right;
}
h5 {
float: left;
}
You should wrap them of course. Otherwise they will apply to all h5 and ul tags...