Рендеринг элементов управления вправо не работает с style = "float: right"

Question

Я пытаюсь правильно отобразить элементы управления в правой части экрана. Я попытался применить style = "float: right" к внешнему элементу div, но он не рендерится правильно. Также я применил после каждого контроля. Просто для вашей информации я использую bootstrap v4. Может кто-нибудь сказать мне, где я иду не так.

Вот стекаблиц

https://stackblitz.com/edit/angular-rb9d3n

Html

<style>

</style>


<div style="width: 100%; padding-bottom: 20px; border-bottom: 1px solid #A8A8A8">
    <input-file placeholder="Select or drop files here..."  [(ngModel)]="Files"></input-file>
    <br/>
    <button type="button" class="btn btn-primary" (click)="postFiles()" [disabled]="!Files || Files.length == 0"
        style="width: 10rem;" title="Wait">Upload&nbsp;&nbsp;<i class="fas fa-paperclip"></i>&nbsp;&nbsp;<img
        *ngIf="Uploading" src="../images/ajax-loader2.gif" style="width: 20px; height: 20px;"
        title="Select Attachments" /></button><span style="color:red; padding-left: 20px" *ngIf="Error && Error.length > 0">{{Error}}</span>
</div>

<div>
        <label for="inputEmail" class="col-form-label modal-label" style="width: 100px;">Type</label>


        <kendo-dropdownlist style="width:250px"
            class="form-control  form-control-sm"
             [filterable]="false"
            textField="Name" [valuePrimitive]="false" valueField="Id" 
            [defaultItem]="defaultItem"
            >
        </kendo-dropdownlist> &nbsp;


           <button type="button" class="btn btn-primary" style="width: 250px">Show Archived</button>  &nbsp;&nbsp;
           <button type="button" class="btn btn-primary" style="width: 250px">Include Related</button>   &nbsp;&nbsp;
           <label for="inputEmail" class="col-form-label modal-label" style="width: 100px">Name Filter</label>
           <input kendoTextBox  style="width: 250px" />

</div>


<div class="card" style="margin-top: 10px">
    <div class="card-body" style="width:100%; text-align: left;">
        <div style="overflow-x: hidden; overflow-y: hidden; ">
            <div class="form-group row">
                <div class="panel panel-default col-md-12  ">
                    <div class="panel-body">
                        <div id="grid-wrapper" [style.height.px]="GridHeight()" [style.width.%]="100"
                            style="float: left;">
                            <ag-grid-angular #agGrid class="ag-theme-balham" [gridOptions]="GridOptions"
                                style="width: 100%; height: 100%" [columnDefs]="ColumnDefs"
                                rowHeight="30"
                                headerHeight="30" rowSelection="single">
                            </ag-grid-angular>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Снимок экрана - это то, чего я пытаюсь достичь

Попробовал систему сетки Bootstrap

<div class="row">
    <div class="col-md-6"></div>

    <div class="col-md-2"><label style="width: 20%" for="inputEmail" class="modal-label">Type</label>


        <kendo-dropdownlist class="form-control  form-control-sm" style="width: 80%" [filterable]="false"
            textField="Name" [valuePrimitive]="false" valueField="Id" [defaultItem]="defaultItem">
        </kendo-dropdownlist>
    </div>

    <div class="col-md-1"> <button type="button" class="btn btn-primary">Show Archived</button></div>
    <div class="col-md-1"> <button type="button" class="btn btn-primary">Include Related</button></div>
    <div class="col-md-2"> <label for="inputEmail" style="width: 30%" class="modal-label">Name
            Filter</label>
        <input kendoTextBox style="width: 70%" /> </div>

</div>