How can I fix CSS styles-CodePudding

I need to modify my CSS styles to make the design look exactly like the following picture

At the moment my design looks like this

Here my code

     <div >
        <h4 >Documentos adjuntos</h4>
          <div >
                <ng-container *ngFor="let item of listDoc">
                  <div >
                    <img src="./assets/img/radicar.svg" alt="" height="40px" />
                    <p >{{ item.nombreArchivo }}</p>
                    <a [href]="item.archivoBase64" target="_blank" mat-button matSuffix mat-icon-button>
                      <mat-icon >visibility</mat-icon>
                    </a>
                  </div>
                 <div >Acta</div>
                </ng-container>
          </div>
      </div>

.item-container {
  background-color: #f4f5f8;
  border-radius: 12px; 
  }

.item-list {
  display: flex;
  align-items: center;
  background-color: #FFFFFF;
  padding: 5px 5px 5px 10px;
  border-radius: 5px 5px 5px 0px; 
  }

.item-text {
  margin: 0px 30px 0px 15px;
  }

.item-description {
  background-color: #BC293E;
  color: #FFFFFF;
  padding: 5px;
  margin-bottom: 10px;
  border-radius: 0px 0px 4px 4px; 
  }

The white div I also need to leave it the same as the image. Currently it is taking up the whole width, and I would like them to be positioned side by side, but the red label to stay at the bottom.

enter image description here

CodePudding user response：

for item container, you can use grid:

.item-container {
  background-color: #f4f5f8;
  border-radius: 12px; 
  display: grid;
  grid-template-column: repeat(4, 1fr);
  grid-gap: 1rem;
}

this will set your container element to have a grid display with 4 items in a row and also 1rem of gap in between of cells.

CodePudding user response：

.row{
  display:flex;
  flex-wrap:wrap;
  column-gap:50px;
  background-color: #f4f5f8;
  padding:10px;
}

.font-form{
  width:100%;
}

.item-container {
  
  border-radius: 12px; 
  display:flex;
}

.item-list {
  display: flex;
  align-items: center;
  background-color: #FFFFFF;
  padding: 5px 5px 5px 10px;
  border-radius: 5px 5px 5px 0px; 
  }

.item-text {
  margin: 0px 30px 0px 15px;
  }

ng-container{
  display:flex;
  align-items:flex-start;
  flex-direction:column;
}

.item-description {
  background-color: #BC293E;
  color: #FFFFFF;
  padding: 5px;
  margin-bottom: 10px;
  border-radius: 0px 0px 4px 4px; 
  }

   <div >
        <h4 >Documentos adjuntos</h4>
          <div >
                <ng-container *ngFor="let item of listDoc">
                  <div >
                    <img src="./assets/img/radicar.svg" alt="" height="40px" />
                    <p >{{ item.nombreArchivo }}</p>
                    <a [href]="item.archivoBase64" target="_blank" mat-button matSuffix mat-icon-button>
                      <mat-icon >visibility</mat-icon>
                    </a>
                  </div>
                 <div >Acta</div>
                </ng-container>
          </div>
     
     <div >
                <ng-container *ngFor="let item of listDoc">
                  <div >
                    <img src="./assets/img/radicar.svg" alt="" height="40px" />
                    <p >{{ item.nombreArchivo }}</p>
                    <a [href]="item.archivoBase64" target="_blank" mat-button matSuffix mat-icon-button>
                      <mat-icon >visibility</mat-icon>
                    </a>
                  </div>
                 <div >Acta</div>
                </ng-container>
          </div>
      </div>

Is this what you've wanted? (look at the full page view)