My attempt at creating a grid using display:inline-block with divs was successful when positioning the divs next to each other. However, once I added elements inside the divs, the parent div started moving down.
Here is the code snippet that caused the issue:
<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>