How to add spacing between input elements - css

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;
}

Answer 2

You can use column-gap:
.date-of-birth {
column-gap: 5px;
display: flex;
flex-direction: row;
}
Initially a part of Multi-column Layout, the definition of column-gap has been broadened to include multiple layout methods. Now specified in Box Alignment, it may be used in Multi-column, Flexible Box, and Grid layouts.
https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap
There is already wide support for this, with Safari (both MacOS and iOS) being the unfortunate exception: https://caniuse.com/mdn-css_properties_column-gap_flex_context
If you need support for those exceptions and possibly even Internet Explorer, you can go like this:
.date-of-birth > *:not(:last-child) {
margin-right: 5px;
}

Answer 3

.date-of-birth {
display: flex;
margin: 0 -5px;
}
.date-of-birth mat-form-field {
max-width: 33.33%;
flex: 0 0 33.33%;
padding: 0 5px;
}
I'd suggested this one.