PrimeNG, DataView: add a div at the bottom of the header

[Archimede]

Dear users,
in my Angular 8 app I have a PrimeNG DataView element. In this element, simple I would add a row with the name of the fields at the bottom of the header. So, I tried to add a <div> tag in every possible position of the html code of this component to understand how to do and: or this tag was too hight (it was visible, but not at the bottom of the header, but i.e. between search row and paginator row), or it was hidden. It was impossible to me, add a div tag in correct position, making this div visible.

I attach an image (please, consider the only point 1) and the code. Thank all!

Code: Select all

    <p-header>
                <div class="ui-helper-clearfix">
                    <div class="ui-g">
                        <div class="ui-g-12 ui-md-4">
                            <p-dropdown [options]="sortOptions" [(ngModel)]="sortKey" placeholder="Sort By" (onChange)="onSortChange($event)" [style]="{'min-width':'140px'}"></p-dropdown>
                        </div>
                        <div class="ui-g-6 ui-md-4 filter-container">
                            <div style="position:relative">
                                <input type="search" pInputText placeholder="Search by brand" (input)="dv.filter($event.target.value)">
                            </div>
                        </div>
                        <div class="ui-g-6 ui-md-4" style="text-align:right">
                            <p-dataViewLayoutOptions></p-dataViewLayoutOptions>
                        </div>
                    </div>
                <!-- A div at this exact position is visibile but is not at the bottom of header -->
                </div>
            <!-- A div at this exact position, maybe the better and more logic one, is unvisible -->
            </p-header>
            <!-- End of the header, start of data row; a div at this exact position is unvisible --> 
            <ng-template let-person pTemplate="listItem">
                <div class="ui-g-12">
                    <div class="car-details">
                        <div>
                            <div class="ui-g">
                                <div class="ui-g-12">Vin: <b>{{person.id}}</b></div>
                                <div class="ui-g-12">Year: <b>{{person.name}}</b></div>
                                <div class="ui-g-12">Brand: <b>{{person.surname}}</b></div>
                                <div class="ui-g-12">Color: <b>{{person.officeNumber}}</b></div>
                            </div>
                        </div>
                        <button pButton type="button" icon="pi pi-search" (click)="selectPerson($event, person)"></button>
                    </div>
                </div>
            </ng-template>