问HTML对齐最后一列

EN

mat-form-field {
    margin: 0px 10px;
}

/**
 * Add basic flex styling so that the cells evenly space themselves in the row.
 */
mat-list {
    display: flex;
    flex-direction: column;
    margin-right: 10px;
}

.profile-picture-container {
    height: 40px;
    width: 40px;
    position: relative;
    text-align: center;
    color: white;
}

.profile-picture-container > img {
    height: 100%;
    width: 100%;
    border-radius: 50%;
}

.fa-play {
    color: white;
}

#btnToggleAudio {
    background-color: transparent;
    border: none;
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
}

mat-list-item {
    flex: 1;
}

.header {
    font-weight: bold;
}

h3 {
    padding-bottom: 5px;
}

.item-grid {
    display: grid;
    grid-template-columns: 60px 40% 20% 20% 20%;
    align-items: center;
}

.item-grid > div {
    display: flex;
    align-items: center;
}

.right {
    text-align: right;
}

mat-list-item:hover {
    background-color: #c4c4c4;
}

mat-list-item:hover #profile-picture {
    filter: brightness(70%);
}

mat-list-item:hover #btnToggleAudio {
    display: block;
}

.action-button{
    height: 30px!important;
    width: 50px!important;
    min-width: unset!important;
}

.mat-icon-align {
    vertical-align: middle;
}

@media (max-width: 900px) {
    .item-grid {
        display: grid;
        grid-template-columns: 50% 25% 25%;
    }

    .desktop-only {
        display: none;
    }
}

<mat-list>
    <h3 matHeader>Reported posts</h3>
    <mat-list-item>
        <div matLine>
            <div class="item-grid" matline>
                <div class="profile-picture-container" style="grid-row: 1 / 3">
                    <img id="profile-picture" src="/assets/images/post_city.jpg">
                    <button id="btnToggleAudio" (click)="onDismissClick(1)">
                        <i class="fas fa-play"></i>
                    </button>
                </div>
                <div class="header">Title</div>
                <div class="header desktop-only">Username</div>
                <div class="header right">Reports</div>
                <div class="header right" style="background-color: blue">Actions</div>
                <div>Test post</div>
                <div class="desktop-only">Dummy-2000</div>
                <div class="right">3</div>
                <div class="right" style="background-color: blue">
                    <button mat-button class="action-button right">
                        <mat-icon class="mat-icon-align">check_circle</mat-icon>
                    </button>
                    <button mat-button class="action-button right">
                        <mat-icon class="mat-icon-align">delete</mat-icon>
                    </button>
                </div>
            </div>
        </div>
    </mat-list-item>
    <mat-divider></mat-divider>
</mat-list>