How to add space between underline classes in mat-form-field elements?

Question

I'm trying to add multiple form fields, I wanted to add 2 form fields in a row but I'm not able to add space between form fields ( not able to separate underline)

 <li>
    <mat-form-field>
      <input matInput [(ngModel)]="name" placeholder="What's your name?">
    </mat-form-field>
    <mat-form-field>
      <input matInput [(ngModel)]="name" placeholder="hello">
    </mat-form-field>
  </li>

Stackblitz: https://stackblitz.com/edit/angular-rqczqy

I want to have space between "what's your name" and "hello"

How can I achieve this? Any help would be greatly appreciated!

Answer 1

You can solve this using flexbox. I forked your stackblitz. Here one of many solutions : Inline matInput

Template

<li class="mat-form-field--inline">
    <mat-form-field>
      <input matInput [(ngModel)]="name" placeholder="What's your name?">
    </mat-form-field>
    <mat-form-field>
      <input matInput [(ngModel)]="name" placeholder="hello">
    </mat-form-field>
  </li>

CSS

.mat-form-field--inline {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.mat-form-field--inline .mat-form-field {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
}

.mat-form-field--inline .mat-form-field:nth-child(1) {
    margin-right: 10px;
}

Answer 2

The simplest way I solved this was as follows:

`<mat-form-field class="input-spacer">
                ...
            </mat-form-field>`

and in the .css

.input-spacer { padding-right: 10px; }