Set width on input mat-form-fields for angular material

Question

I am so very new to Angular, and I am trying to create a form with longer-than-default input fields. This is my current code:

person.component.html

<form class="new-person-form">
    <mat-card>
        <mat-form-field>
            <input matInput placeholder="Name">
        </mat-form-field>
        <mat-form-field>
            <input matInput placeholder="Birthday">
        </mat-form-field>
        <mat-checkbox>Active</mat-checkbox>
    </mat-card>
</form>

person.component.css

.mat-form-field {
    padding: 10px;
}

.mat-checkbox {
    padding: 10px;
}

person.component.html

<form class="new-person-form">
    <mat-card fxLayout="row">
        <mat-form-field>
            <input matInput placeholder="Name" fxFlex="50">
        </mat-form-field>
        <mat-form-field>
            <input matInput placeholder="Birthday" fxFlex="25">
        </mat-form-field>
        <mat-checkbox fxFlex="25">Active</mat-checkbox>
    </mat-card>
</form>

person.component.css

.mat-form-field {
    padding: 10px;
}

.mat-checkbox {
    padding: 10px;
}

And this is the result:

|                                                                          |
|   Name___________  Birthday_______  [] Active                            |
|                                                                          |

I'm trying to lengthen Name to be about 50% of the page, so something like this:

|                                                                          |
|   Name___________________________  Birthday_______  [] Active            |
|                                                                          |

I'm not super great at CSS, so I think FlexLayout might be what I need, but so far I can't get it to work correctly.

Answer 1

This will change the width of matform field

<mat-form-field [style.width.px]=327>
  <input matInput placeholder="Template Name" value="{{templateName}}">
</mat-form-field>