Si quieres acomodar todos los items uno a lado de otro, prueba usando flexbox. No sé qué tenga con exactitud tu clase "row", pero vamos a utilizar ese div como el contenedor principal y ese será el que contenga a todos los items.
También vamos a sacar la etiqueta <h4></h4>
del contenedor principal
Quedaría así:
<body>
<h4 class="font-form">Documentos adjuntos</h4>
<div class="contenedor_principal">
<div class="item-container">
<ng-container *ngFor="let item of listDoc">
<div class="item-list">
<img src="./assets/img/radicar.svg" alt="" height="40px" />
<p class="item-text">{{ item.nombreArchivo }}</p>
<a [href]="item.archivoBase64" target="_blank" mat-button matSuffix mat-icon-button>
<mat-icon class="icons">visibility</mat-icon>
</a>
</div>
<div class="item-description">Acta</div>
</ng-container>
</div>
<div class="item-container">
<ng-container *ngFor="let item of listDoc">
<div class="item-list">
<img src="./assets/img/radicar.svg" alt="" height="40px" />
<p class="item-text">{{ item.nombreArchivo }}</p>
<a [href]="item.archivoBase64" target="_blank" mat-button matSuffix mat-icon-button>
<mat-icon class="icons">visibility</mat-icon>
</a>
</div>
<div class="item-description">Aceptaciones</div>
</ng-container>
</div>
<div class="item-container">
<ng-container *ngFor="let item of listDoc">
<div class="item-list">
<img src="./assets/img/radicar.svg" alt="" height="40px" />
<p class="item-text">{{ item.nombreArchivo }}</p>
<a [href]="item.archivoBase64" target="_blank" mat-button matSuffix mat-icon-button>
<mat-icon class="icons">visibility</mat-icon>
</a>
</div>
<div class="item-description">Acta</div>
</ng-container>
</div>
<div class="item-container">
<ng-container *ngFor="let item of listDoc">
<div class="item-list">
<img src="./assets/img/radicar.svg" alt="" height="40px" />
<p class="item-text">{{ item.nombreArchivo }}</p>
<a [href]="item.archivoBase64" target="_blank" mat-button matSuffix mat-icon-button>
<mat-icon class="icons">visibility</mat-icon>
</a>
</div>
<div class="item-description">Acta</div>
</ng-container>
</div>
<div class="item-container">
<ng-container *ngFor="let item of listDoc">
<div class="item-list">
<img src="./assets/img/radicar.svg" alt="" height="40px" />
<p class="item-text">{{ item.nombreArchivo }}</p>
<a [href]="item.archivoBase64" target="_blank" mat-button matSuffix mat-icon-button>
<mat-icon class="icons">visibility</mat-icon>
</a>
</div>
<div class="item-description">Acta</div>
</ng-container>
</div>
</div>
Ahora que ya está agrupado todo en el div principal, vamos a hacer que sus elementos hijos (los divs con la clase "item-container") se comporten como flex. Para ellos agregamos:
.contenedor_principal {
display: flex;
justify-content: space-around;
flex-flow: row wrap;
}
Ahora que ya están acomodados, vamos a resolver el div de color rojo que ocupa todo el ancho, como bien te dijeron los demás, utilizamos display: inline-block;
en tu clase de "item-description", quedaría así:
.item-description {
background-color: #BC293E;
color: #FFFFFF;
padding: 5px;
margin-bottom: 10px;
border-radius: 0px 0px 4px 4px;
display: inline-block;
}
Y por último, le podemos dar un margin-bottom: 40px;
a tu clase "item-container" para que no se vea amontonado, o como prefieras.
.item-container {
background-color: #f4f5f8;
border-radius: 12px;
margin-bottom: 40px;
}
Saludos.