Nested inline-block elment div

Question

i try a grid with display:inline-block with divs. When I positioning the divs next to next all works fine. When I try to set elements inside the div then the parent div move down:

The code:

<div style="white-space: nowrap;">
  <div *ngFor="let xUnit of xUnits; let i=index"
        style="width: 106px;
              max-width: 106px;
              display:inline-block;
              position: relative;
              height: 50px;
              max-height: 50px;
              padding-right: 5px;
              border: 1px solid #e5e7eb">
      <ng-container *ngFor="let item of getItems(resources[0], xUnit)">
        <div style="height: 25px;
                  position: relative;
                  border-left: 2px solid #FA607E;
                  background: white;
                  margin-left: 5px;
                  display: block;
                  margin-right: 5px;
                  color: #FA607E;
                  font-family: 'Source Sans Pro', sans-serif !important;
                  font-weight: 300;"
            [style.width]="getWidth(item)">
          <span style="padding-left: 5px;">
            Test
          </span>
        </div>
      </ng-container>
    </div>
</div>