Impossible to get an Angular component on the left of another - css

Question

Simple question, but probably a hard answer. I'm doing an Angular 5 app which has multiple components. These are two of them:
ChartPicker
<div>
<span>
<div class="btn-group btn-group-small" *ngIf="available_charts.chart_types.length > 1">
<label *ngFor="let type_key of available_charts.chart_types" class="btn btn-default active" [class]="type_key.name == available_charts.chart_types.selected ? 'active' : ''" (click)="available_charts.selected = type_key.name">
<i class="fa fa-bar-chart" aria-hidden="true"></i>
</label>
</div>
</span>
</div>
GranularityPicker
<div>
<span>
<select [(ngModel)]="config.granularity.selected">
<option [selected]="false" *ngFor="let option of config.granularity.available" [ngValue]="option">
<span class="option-txt"> {{option}} </span>
</option>
</select>
</span>
</div>
Both are quite easy... right? Well, I put them in the app like this, with another component called segments which is located at the left side of the page:
<segments [config]="config"></segments>
<chart-picker [config]="config" class="chart-picker"></chart-picker>
<granularity [config]="config" class="granularity-picker"></granularity>
Chart-picker is before granularity, and the CSS of both classes have some margin to the right side, and a float:right.
... but the chart-picker, the one which should be first, appears the last, at the right of the granularity one.
This makes absolutely no sense. And it doesn't matter what I try to change it the CSS... it just won't work. Any ideas on how to fix this?

Answer 1

Both elements have float:right. The floats are calculated in document order, so the first element ends up floating all the way to the right, then the second one floats next to the first, leaving them in the "wrong" order. You probably want to be using inline or inline-block elements instead of float here.
.r {float:right}
<div class="r">First</div>
<div class="r">Second</div>