title: using "row" and "column" under Angular (Flexbox) creates a lot of vertical space between HTML input fields
body: <p>I am trying to have 2 input fields on the <strong>same line</strong>. To do this, I have been using Flexbox. I have noticed that when using <code>row</code> and <code>column</code> with Flex creates additional spacing as seen in the picture below:</p>
  
  <p><a href="https://i.stack.imgur.com/fmEeJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fmEeJ.png" alt="enter image description here"></a></p>
  
  <p>Below is how the structure of the code is set up</p>
  
  <p><a href="https://i.stack.imgur.com/TnfYE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TnfYE.png" alt="enter image description here"></a></p>
  
  <p><strong>apidefs-disp.component.html</strong></p>
  
  <pre><code>&lt;div class="flex-disp-apidefs-container"&gt;
      &lt;div class="flex-disp-apidefs-list"&gt;
  
          &lt;kdc-apidefs-list&gt;&lt;/kdc-apidefs-list&gt; 
      &lt;/div&gt;
      &lt;div class="flex-disp-apidefs-form"&gt;
          &lt;kdc-apidefs-form&gt;&lt;/kdc-apidefs-form&gt; 
      &lt;/div&gt;
  &lt;/div
  </code></pre>
  
  <p><strong>apidefs-form.component.html</strong></p>
  
  <pre><code>        &lt;div class="row"&gt;
  
              &lt;!-- Name --&gt;
              &lt;div class="col"&gt;
                  &lt;div class="md-form"&gt;
  
                      &lt;input required type="text" id="materialapidefsFormName" class="form-control"
                          aria-describedby="materialapidefsFormNameHelpBlock" mdbInput formControlName="name" /&gt;
  
                      &lt;label for="materialapidefsFormName"&gt;Name&lt;/label&gt;
                      &lt;mat-error
                          *ngIf="apidefsForm.controls['name'].hasError('required') &amp;&amp; apidefsForm.controls.name.touched"&gt;
                          Name is required
                      &lt;/mat-error&gt;
  
                      &lt;mat-error
                          *ngIf="apidefsForm.controls['name'].hasError('maxLength') &amp;&amp; apidefsForm.controls.name.touched"&gt;
                          maximum Length is 25
                      &lt;/mat-error&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- Description --&gt;
              &lt;div class="col"&gt;
                  &lt;div class="md-form"&gt;
  
                      &lt;input required type="text" id="materialapidefsFormDescription" class="form-control"
                          aria-describedby="materialapidefsFormDescriptionHelpBlock" mdbInput
                          formControlName="description" /&gt;
  
                      &lt;label for="materialapidefsFormDescription"&gt;Description&lt;/label&gt;
                      &lt;mat-error
                          *ngIf="apidefsForm.controls['description'].hasError('required') &amp;&amp; apidefsForm.controls.description.touched"&gt;
                          Description is required
                      &lt;/mat-error&gt;
  
                      &lt;mat-error
                          *ngIf="apidefsForm.controls['description'].hasError('maxLength') &amp;&amp; apidefsForm.controls.description.touched"&gt;
                          maximum Length is 50
                      &lt;/mat-error&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  [... snip ...]
  </code></pre>
  
  <p><strong>apidefs-disp.component.scss</strong></p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p><strong>apidefs-list.component.scss</strong></p>
  
  <pre><code>NOTHING
  </code></pre>
  
  <p><strong>apidefs-form.component.scss</strong></p>
  
  <pre><code>.text-center {
      width: 100%;
  }
  
   .flex-apidefs-form{
      display:flex;
      width: 100%;
      padding: 30px;
      background-color: var(--accent-lighter-color);
  
   }
  </code></pre>
  
  <p><strong>QUESTION</strong>: how can I make the vertical distance between 2 sets of input fields smaller?</p>
  
  <p>Any help, hints or advice would be greatly appreciated.</p>
  
  <p>TIA</p>
  
  <p><strong>ETA</strong>
  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)</p>
  
  <p><a href="https://i.stack.imgur.com/YmQvx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YmQvx.png" alt="enter image description here"></a></p>
  
  <p>Seeing how one can come about this issue ...</p>