Angular mat label & input side by side-CodePudding

how to have the mat-label and the input side by side? I also need it to be in column because I have several inputs but I can't get the label and the input side by side.

thanks.

html

<form [formGroup]="form">

<div class="form-nom">
  <mat-form-field appearance="legacy">
    <mat-label>Nom</mat-label>
    <input matInput formControl="nom">
  </mat-form-field>
</div>

</form>

css

form {
 display: flex;
 flex-direction: column;
}

.form-nom {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
}

CodePudding user response：

<div>
  <label>Float label: </label>
  <mat-form-field>
    <input matInput />
  </mat-form-field>
</div>