How to align dropdown to right of mat-card-title element?

Question

Goal : Align Dropdown to right side of other element

Problem : It always displays below

This is an Angular site

What I've tried : I've tried adding the mat-select within a mat-form-field and assigning a css class. I've also tried placing a form around that and then palcing the mat-card title within the form. I've also tried changing the width of the mat-card-title I've tried placing a div around both of these elements

HTML :

<mat-card class="login-card">
    <div>
        <mat-card-title class="text-center" i18n="@@MoVeSeLo_H1_1">
            Please Sign In
        </mat-card-title>
        <form [formGroup]="_siteForm">            
            <mat-form-field class="right">
                <mat-select (selectionChange)="doSomething($event)" placeholder="Language">
                    <mat-option *ngFor="let language of languages" [value]="language">
                        {{language.viewValue}}
                    </mat-option>
                </mat-select>
            </mat-form-field>
       </form>
    </div>
</mat-card>

CSS :

.login-card {
    width: 80%;
    max-width: 80rem; }

.mat-form-field {
    display: block;
    width: 100%;
    margin: 0 auto;
    max-width: 30rem; }

.right {
    float: right;
    width: 200px;
}

Picture showing where it currently is, and arrow pointing to where I'd like it to be:

Answer 1

You can put the select and the title into a flexbox , like:

<mat-card class="login-card">
  <form [formGroup]="_siteForm">
    <div class="title-container">
      <mat-card-title i18n="@@MoVeSeLo_H1_1">
        Please Sign In
      </mat-card-title>
        <mat-form-field class="language-field">
            <mat-select (selectionChange)="doSomething($event)" placeholder="Language">
                <mat-option *ngFor="let language of languages" [value]="language">
                    {{language.viewValue}}
                </mat-option>
            </mat-select>
        </mat-form-field>
    </div>
  </form>
</mat-card>

...

.title-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 8px;
}

.language-field {
  margin-top: -16px;
  margin-left: 16px;
}

I've also adjusted margins of the select input in order to make it looking correctly.

stackblitz link

---

But if you want the title to be centered inside the card, it's easier to use 'absolute' position for the select, instead of using the flexbox, like:

...

.title-container {
  position: relative;
  margin-top: 8px;
}

.title {
  text-align: center;
}

.language-field {
  position: absolute;
  right: 0;
  top: 0;
  margin-top: -16px;
}

stackblitz link

Answer 2

The simple and easiest way, this can be managed using position CSS

 #parent { position: relative; width: 500px; height: 400px; background-color: #fafafa; border: solid 3px #9e70ba; font-size: 24px; text-align: center; } #child { position: absolute; right: 0px; width: 200px; height: 200px; background-color: #fafafa; border: solid 3px #78e382; font-size: 24px; text-align: center; }

 <div id='parent'> <div id='child'></div> </div>

property, please find below code snippet: