using "row" and "column" under Angular (Flexbox) creates a lot of vertical space between HTML input fields

I am trying to have 2 input fields on the same line. To do this, I have been using Flexbox. I have noticed that when using row and column with Flex creates additional spacing as seen in the picture below:

Below is how the structure of the code is set up

apidefs-disp.component.html

<div class="flex-disp-apidefs-container">
    <div class="flex-disp-apidefs-list">

        <kdc-apidefs-list></kdc-apidefs-list> 
    </div>
    <div class="flex-disp-apidefs-form">
        <kdc-apidefs-form></kdc-apidefs-form> 
    </div>
</div

apidefs-form.component.html

<div class="row">

            <!-- Name -->
            <div class="col">
                <div class="md-form">

                    <input required type="text" id="materialapidefsFormName" class="form-control"
                        aria-describedby="materialapidefsFormNameHelpBlock" mdbInput formControlName="name" />

                    <label for="materialapidefsFormName">Name</label>
                    <mat-error
                        *ngIf="apidefsForm.controls['name'].hasError('required') && apidefsForm.controls.name.touched">
                        Name is required
                    </mat-error>

                    <mat-error
                        *ngIf="apidefsForm.controls['name'].hasError('maxLength') && apidefsForm.controls.name.touched">
                        maximum Length is 25
                    </mat-error>
                </div>
            </div>

            <!-- Description -->
            <div class="col">
                <div class="md-form">

                    <input required type="text" id="materialapidefsFormDescription" class="form-control"
                        aria-describedby="materialapidefsFormDescriptionHelpBlock" mdbInput
                        formControlName="description" />

                    <label for="materialapidefsFormDescription">Description</label>
                    <mat-error
                        *ngIf="apidefsForm.controls['description'].hasError('required') && apidefsForm.controls.description.touched">
                        Description is required
                    </mat-error>

                    <mat-error
                        *ngIf="apidefsForm.controls['description'].hasError('maxLength') && apidefsForm.controls.description.touched">
                        maximum Length is 50
                    </mat-error>
                </div>
            </div>
        </div>

[... snip ...]

apidefs-disp.component.scss

.flex-disp-apidefs-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex: auto;
}

.flex-disp-apidefs-list {
    display: flex;
    flex-direction: column; 
    //width:100%;
    flex:2;
}

.flex-disp-apidefs-form {
    display: flex;
    flex-direction: column; 
    //width: 100%;
    flex:4;
}

apidefs-list.component.scss

NOTHING

apidefs-form.component.scss

.text-center {
    width: 100%;
}

 .flex-apidefs-form{
    display:flex;
    width: 100%;
    padding: 30px;
    background-color: var(--accent-lighter-color);

 }

QUESTION: how can I make the vertical distance between 2 sets of input fields smaller?

Any help, hints or advice would be greatly appreciated.

TIA

ETA Currently getting following issue when attempting to copy code to Stackblitz (it seems to be referring to a product I paid for - not sure if paid-for product should be added to stackblitz)

Seeing how one can come about this issue ...