Q:

Flexbox not aligning elements

I have an issue with my html5 angular 8 view. The elements doesn't appear in the same line. 
I have put this html5 code:
     <div class="elementContainer">
      <span  class="item">
        <span class="hidden-file">
          <input type="file" style="visibility: hidden; position: absolute;" #fileInput ng2FileSelect
            [uploader]="uploader" />
        </span>
        <button type="button" class="btn btn-primary" (click)="fileInput.click()">
          Upload file
        </button>
        <span> {{fileName}}</span>
      </span>

        <p class="item">Or</p>

        <textarea class="item" matInput placeholder="Put xml file here" [(ngModel)]="fileText" (change)="updateSearchVisibility()">
        </textarea>
    </div>

My css  classes for this part are:
    elementContainer {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }

    item {
      display: flex;
    }

Did I miss something ? 
Here is my render:

A:

Nothing change major. You can put the CSS code as per SCSS syntex.
SCSS Code:
.elementContainer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .item {
     display: flex;
  }
}

