Float right table doesnt work - css

Question

I tried to apply the float: right to the button and the text but its just not working because it destroys everything.
Any ideas?
<hr>
<div class="table">
<div class="row">
<i class="fa fa-refresh" aria-hidden="true" style="margin-right: 4px;"></i> Aktualisieren
<span class="right-cell"> 14 neue Meldungen</span>
</div>
</div>
<hr>
https://jsfiddle.net/uoyh2fk9/

Answer 1

Not sure what, "destroys everything" means, but it sounds like flexbox might work better for what you are trying to achieve. Remove the display: table's from your divs and try the following:
CSS
.row {
display: flex;
justify-content: flex-end;
}
JSFiddle
If you would like to know more about flexbox and how it works, here is a link.

Answer 2

Here's a possible solution: https://jsfiddle.net/UXEngineer/uoyh2fk9/9/
<div class="container-fluid">
<div class="col-lg-12">
<div class="col-md-3 col-sm-3 border-red">
<a href="#" class="btn btn-primary">
<i class="fa fa-refresh" aria-hidden="true" style="margin-right: 4px;"></i> Aktualisieren</a>
</div>
<div class="col-md-9 col-sm-9 border-red">
<span>14 neue Meldungen</span>
</div>
<div class="col-lg-12 clearfix"></div>
<div class="col-lg-12 clearfix">
<hr class="horizontal-divider">
</div>
<div class="col-md-9 col-sm-9 border-red">
<span>14 neue Meldungen</span>
</div>
<div class="col-md-3 col-sm-3 border-red">
<a href="#" class="btn btn-primary">
<i class="fa fa-refresh" aria-hidden="true" style="margin-right: 4px;"></i> Aktualisieren</a>
</div>
</div>
</div>
I've added a responsive solution using the Bootstrap CDN to the example in JSFiddle. If you want to use this jsfiddle make sure you also add the CDN external sources to the your solution.
You can change the column size to fit your solution.