How to make React-Day-Picker months side by side horizontally instead of vertically aligned

Question

I am using the react-day-picker component and I have been able to make 2 months show up but they are presented on the screen one month on top of the other. How can I change this to be aligned horizontally?I have tried changing the CSS and using inline, but it does not work.

Here is how it looks now

     import React from 'react';
     import DayPicker from 'react-day-picker';
     import 'react-day-picker/lib/style.css';

export default function Example() {
  return <DayPicker numberOfMonths={2} />;
}

Answer 1

What you can try is adding this to you styles:

.DayPicker-Months {
  flex-direction: row;
  flex-wrap: nowrap;
}

You can see the actual example here: https://codesandbox.io/s/react-day-picker-base-yledo