
<div style="padding: 0 18px;">

    <div class="flexibox-row">
        <!-- Left column -->
        <div class="flex-grow-1">
            <h1>{{selectedEvent?.name}}</h1>
            <p>{{selectedEvent?.description}}</p>
        </div>

        <!-- Right column -->
        <div class="flex-grow-1 padding-top-30">
            <md-select 
                name="events"
                placeholder="Please, select an event to filter" 
                [(ngModel)]="selectedEventName" 
                (change)="onEventSelected($event)" >
                <md-option *ngFor="let evt of events" [value]="evt.name">
                    {{evt.name}}
                </md-option>
            </md-select>
            <button md-button color="primary" class="padding-left-12" (click)="resetFilter()">Reset filter</button>
        </div>
    </div>
    

    <div class="full-width padding-top-18 padding-left-6">
        <ag-grid-angular #agGrid 
            class="ag-material" 
            style="width: 100%; height: 200px"
            [gridOptions]="gridOptions">
        </ag-grid-angular>
    </div>
</div>

<div style="padding: 0 18px;">

    <div class="flexibox-row">
        <!-- Left column -->
        <div class="flex-grow-1">
            <h1>{{selectedEvent?.name}}</h1>
            <p>{{selectedEvent?.description}}</p>
        </div>

        <!-- Right column -->
        <div class="flex-grow-1 padding-top-30">
            <md-select 
                name="events"
                placeholder="Please, select an event to filter" 
                [(ngModel)]="selectedEventName" 
                (change)="onEventSelected($event)" >
                <md-option *ngFor="let evt of events" [value]="evt.name">
                    {{evt.name}}
                </md-option>
            </md-select>
            <button md-button color="primary" class="padding-left-12" (click)="resetFilter()">Reset filter</button>
        </div>
    </div>
    

    <div class="full-width padding-top-18 padding-left-6" style="height: 600px">
        <ag-grid-angular #agGrid 
            class="ag-material" 
            style="width: 100%; height: calc(100% - 20px);"
            [gridOptions]="gridOptions">
        </ag-grid-angular>
    </div>
</div>
Make bigger the ranking table
Make bigger the ranking table
