Question: I'm having trouble finding the right code to allign my div element to the right of the page.

Now I have this:
[![Current](https://i.stack.imgur.com/JoJu5.png)](https://i.stack.imgur.com/JoJu5.png)

I want to have this:
[![Wanted result](https://i.stack.imgur.com/xZWJ6.png)](https://i.stack.imgur.com/xZWJ6.png)

Here is my code:

```
<h1 class="pb-2 mt-4 mb-2 border-bottom">Producten</h1>

<button type="button" name="button" class="btn btn-warning" *ngIf="!newProduct" (click)="newProductForm()">Nieuwe productvraag</button>
<button [disabled]="loading" type="button" name="button" class="btn btn-default" *ngIf="!newProduct" (click)="reload()"><i class="fas fa-sync-alt"></i>&nbsp;&nbsp;Reload</button>
<form name="searchForm" (submit)="search()" class="form-check-inline">
  <div class="float-right">
    <input type="text" name="title" class="form-control" placeholder="*Zoek product" aria-label="Search"/>
    <button type="submit" style="display:none;">Hidden</button>
  </div>
</form>

```

The 2 buttons (yellow and grey) don't have anything to do with the form. The form is a search function of my page. I use bootstrap for styling.

Answer: 
I have resolved your problem please check following code

```
<h1 class="pb-2 mt-4 mb-2 border-bottom">Producten</h1>
<div class="clearfix">
<button type="button" name="button" class="btn btn-warning" *ngIf="!newProduct" (click)="newProductForm()">Nieuwe productvraag</button>
<button [disabled]="loading" type="button" name="button" class="btn btn-default" *ngIf="!newProduct" (click)="reload()"><i class="fas fa-sync-alt"></i>&nbsp;&nbsp;Reload</button>
<form name="searchForm" (submit)="search()" class="form-check-inline float-right">
    <input type="text" name="title" class="form-control" placeholder="*Zoek product" aria-label="Search"/>
    <button type="submit" style="display:none;">Hidden</button>
  </div>
</form>
</div>

```
If you are using bootstrap 4 then you can do something like this. wrap your buttons and form into one div and give him class `d-flex` and `ml-auto` class to form tag

```html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<h1 class="pb-2 mt-4 mb-2 border-bottom">Producten</h1>

<div class="d-flex">
<button type="button" name="button" class="btn btn-warning" *ngIf="!newProduct" (click)="newProductForm()">Nieuwe productvraag</button>
<button [disabled]="loading" type="button" name="button" class="btn btn-default" *ngIf="!newProduct" (click)="reload()"><i class="fas fa-sync-alt"></i>&nbsp;&nbsp;Reload</button>
<form name="searchForm" (submit)="search()" class="form-check-inline ml-auto">
  <div>
    <input type="text" name="title" class="form-control" placeholder="*Zoek product" aria-label="Search"/>
    <button type="submit" style="display:none;">Hidden</button>
  </div>
</form>
<div>
```