将div并排放置不起作用

Question

我试图将2个div并排放置，它们甚至彼此并排，但是第二个div的高度会受到第一个div的影响。图片几乎也解释了这一切。 我试过float：left;到我的两个CSS规则，但看起来比这差。

.mat-form-field {
  width: 35vw;
  margin-left: 5vw;
  margin-top: 2vh;
}

.attachment {
  width: 35vw;
  border: 1px solid black;
  margin-left: 50vw;
  margin-top: 2vh;
  height: 60vh;
}

<div class="wrapper">

  <div class="input">
    <div ng-controller="FormController">
      <mat-form-field>
        <input matInput placeholder="Name" [readonly]="true" [(ngModel)]="name">
      </mat-form-field><br>
      <mat-form-field>
        <input matInput placeholder="E-Mail" [readonly]="true" [(ngModel)]="email">
      </mat-form-field><br>
      <mat-form-field>
        <input matInput placeholder="Betreff" [readonly]="true" [(ngModel)]="subject">
      </mat-form-field><br>
      <mat-form-field>
        <textarea matInput rows="20" placeholder="Inhalt" [readonly]="true" [(ngModel)]="content"></textarea>
      </mat-form-field>
    </div>
  </div>
  <div class="attachment">
    test
  </div>
  <div class="finish">
    <button mat-button>
                &#8594;
            </button>
  </div>
</div>