Kendo UI FormField side by side

Question

I'm using Kendo-UI with the following html to create a form within a tabstrip:

<kendo-tabstrip>
<kendo-tabstrip-tab [title]="'Date'" [selected]="true">
    <ng-template kendoTabContent>
        <div class="SearchForm">
            <form class="k-form MySearchForm" [formGroup]="searchByTimeWindowform">
                    <kendo-formfield>
                        <kendo-label [for]="fromDate" text="Start Date:"></kendo-label>
                        <kendo-datepicker kendoTextBox #fromDate [formControlName]="'fromDate'"></kendo-datepicker> 
                        <kendo-formerror>Please provide a start date</kendo-formerror>
                    </kendo-formfield>
                    <kendo-formfield>
                        <kendo-label [for]="endDate" text="End Date:"></kendo-label>
                        <kendo-datepicker kendoTextBox #endDate [formControlName]="'endDate'"></kendo-datepicker> 
                        <kendo-formerror>Please provide an end date</kendo-formerror>
                    </kendo-formfield>
            </form>
           
            <div class="SearchFormButton">
                <button kendoButton (click)="SearchForTimeWindow()"><span span class="k-icon k-i-search"></span>Search</button>
            </div>
        </div>
    </ng-template>
</kendo-tabstrip-tab>

<kendo-tabstrip-tab [title]="'Other tab'">
    <ng-template kendoTabContent>
        <p>other tab...</p>
    </ng-template>
</kendo-tabstrip-tab>

The result looks like this:

What I would like to achieve however is to position the date pickers side by side (with the label still on top)

Something like this:

Is this at all possible?

I tried to use bootstrap grid, but this seems to add a horizontal scrollbar to the tabstrip.

Answer 1

Thanks to the help of Steve Greene, the solution was to use the following css:

.wrap {
      display: flex;
      justify-content: space-between;
    }

Later this can be used in a div that wraps the formfields

            <div class="wrap">
                <kendo-formfield class="arrival-date">
                  <kendo-label [for]="arrivalDate" text="Arrival Date"></kendo-label>
                  <kendo-datepicker #arrivalDate [formControlName]="'arrivalDate'"></kendo-datepicker>
                    <kendo-formerror>Error: Arrival date is required</kendo-formerror>
                </kendo-formfield>

                <kendo-formfield>
                    <kendo-label [for]="numberOfNights" text="Number of Nights"></kendo-label>
                    <kendo-numerictextbox #numberOfNights [formControlName]="'numberOfNights'" [min]="0"></kendo-numerictextbox>
                        <kendo-formerror>Error: required</kendo-formerror>
                </kendo-formfield>
            </div>

In the end, I did opt to use the Kendo MultiViewCalendar component instead.