p-calendar with p-selectButton in header

Question

I'm doing some kind of dashboard and I need to filter some stuff using a p-calendar. I want to make this component look like the other one:

As you can see the problem in the first one is the element p-selectButton, it takes too much space. I really don't need it to be smaller, I just want that it fits in just on line. It doesn't matter if the calendar component gets wider, in my opinion I think that would better than reduce the selectButton component.

This is my code:

<p-calendar [view]='calendarView'>
  <ng-template pTemplate='header'>
    <p-selectButton [options]='timeViewOpions' [(ngModel)]='timeView' [multiple]='false' optionLabel='name'
                    optionValue='value' (onChange)='onTimeViewChange()'></p-selectButton>
  </ng-template>
</p-calendar>

It would be magnific if somehow you help me to make it functionally. The main problem is the display of p-SelectButton but if you could help me with the functionallity that would be great! Thank you so much

Answer 1

The solution was to add styleClass flex

<p-calendar [view]='calendarView'>
  <ng-template pTemplate='header'>
    <p-selectButton [options]='timeViewOpions' [(ngModel)]='timeView' [multiple]='false' optionLabel='name'
                    optionValue='value' (onChange)='onTimeViewChange()' styleClass='flex'></p-selectButton>
  </ng-template>
</p-calendar>