ASP.NET Core MVC - Jquery button - placing an icon on the right side and not have it default to a second line

I have looked for an answer to this in a few questions. I have a set of three jquery buttons in line being created via a jquery widget, the function for which I have added below:

       //Render the back/forward buttons
    _renderCalendarButtons: function ($calendarContainer) {
        var self = this, options = this.options;
        if (!options.showHeader) return;
        if (options.buttons) {
            calendarNavHtml = "<div class="sc-nav">
                <button class="sc-prev"></button>
                <button class="sc-today"></button>
                <button class="sc-next"></button>
                </div>";

            $(calendarNavHtml).appendTo($calendarContainer);

            $calendarContainer.find(".sc-nav .sc-prev")
                .button({
                    icons: { primary: 'ui-icon-seek-prev' },
                    label: options.buttonText.lastWeek,
                })
                .click(function () {
                    self.element.scheduler("prevWeek");
                    return false;
                });

            $calendarContainer.find(".sc-nav .sc-today")
                 .button({
                     icons: { primary: 'ui-icon-home' },
                     label: options.buttonText.today
                 })
                .click(function () {
                    self.element.scheduler("today");
                    return false;
                });

            $calendarContainer.find(".sc-nav .sc-next")
                 .button({
                     icons: { secondary: 'ui-icon-seek-next' },
                     label: options.buttonText.nextWeek
                 })
                .click(function () {
                    self.element.scheduler("nextWeek");
                    return false;
                });
        }
    },

The left says "Prev" the middle says "Today" and the one on the right says "Next".

The right button has an icon in it situated to the left. same with the middle button but for the right I wanted the icon to be situated on the right of the text. So based on the information in a Stackoverflow question I used:

                     .button({
                     icons: { secondary: 'ui-icon-seek-next' },
                     label: options.buttonText.nextWeek

..and this worked prviding an icon the right. However, the icon is being displayed below the text as if the button is not big enough. I have tried modifying the style as per another Stackoverflow question including "display: inline":

    .sc-nav button {
    margin: 0 0.5em;
    width: 10em;
    padding-top: 10px;
    padding-bottom: 10px;
    display:inline;
}

But I still get the icon on the second row... can someone point out how this can all just appear on one line with no two line buttons...