Semantic UI React: How to make Tab menu use full width of container?

I have a component that uses Semantic UI Tab with only two (2) menu options. My problem is, how to wrap the 2 options to take advantage of the full width of its container.

Kindly see picture below for reference:

I want "Calendar" and "To-Do List" use 50% each of the width.

I use the code in their sample as below:

      const panes = [{
                menuItem: 'Calendar',
                render: () => <Tab.Pane attached={false}><EventList /></Tab.Pane>
              },
              {
                menuItem: 'To-Do List',
                render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>
              }
            ]
      return <Tab
          menu={{ attached: false }}
          panes={panes}
        />