How to add spacing between input elements

Question

How can I add spacing between input elements that has flex-direction: row. I'm using components from the angular-material library. Below screenshot with a highlighted inputs that must have spacing between them

HTML

<form class="form-container">
    <mat-form-field class="full-width">
        <mat-label>First name *</mat-label>
        <input type="text" name="firstName" matInput placeholder="First name" value="">
    </mat-form-field>

    <mat-form-field class="full-width">
        <mat-label>Last name *</mat-label>
        <input type="text" name="lastName" matInput placeholder="Last name" value="">
    </mat-form-field>

    <div class="date-of-birth">
        <mat-form-field>
            <mat-label>Day</mat-label>
            <input type="number" name="day" matInput placeholder="Day" value="">
        </mat-form-field>

        <mat-form-field>
            <mat-label>Month</mat-label>
            <input type="number" name="month" matInput placeholder="Month" value="">
        </mat-form-field>

        <mat-form-field>
            <mat-label>Year</mat-label>
            <input type="number" name="year" matInput placeholder="Year" value="">
        </mat-form-field>

    </div>

</form>

CSS

.form-container {
  min-width: 150px;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}

.full-width {
  width: 100%;
}

.date-of-birth {
  display: flex;
  flex-direction: row;
}

Answer 1

Adding gap in .date-of-birth will solve your issue:

<form class="form-container">
    <mat-form-field class="full-width">
        <mat-label>First name *</mat-label>
        <input type="text" name="firstName" matInput placeholder="First name" value="">
    </mat-form-field>

    <mat-form-field class="full-width">
        <mat-label>Last name *</mat-label>
        <input type="text" name="lastName" matInput placeholder="Last name" value="">
    </mat-form-field>

    <div class="date-of-birth">
        <mat-form-field>
            <mat-label>Day</mat-label>
            <input type="number" name="day" matInput placeholder="Day" value="">
        </mat-form-field>

        <mat-form-field>
            <mat-label>Month</mat-label>
            <input type="number" name="month" matInput placeholder="Month" value="">
        </mat-form-field>

        <mat-form-field>
            <mat-label>Year</mat-label>
            <input type="number" name="year" matInput placeholder="Year" value="">
        </mat-form-field>

    </div>

</form>

CSS

.form-container {
  min-width: 150px;
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}

.full-width {
  width: 100%;
}

.date-of-birth {
  display: flex;
  flex-direction: row;
  gap: 20px;
}