Uneven header height with showYearDropdown + monthsShown > 1 misaligns day grids

[SaiBalaji202]

Describe the bug
When showYearDropdown (or showMonthDropdown / showMonthYearDropdown) is combined with monthsShown > 1, only the first month renders the dropdown control in its header — this is intentional (calendar.tsx's renderYearDropdown(i !== 0), covered by src/test/multi_month_test.test.tsx). The problem is that .react-datepicker__header__dropdown has no explicit height set in datepicker.scss, so on the months that don't render a dropdown it collapses to 0 height instead of reserving the same space. That makes month 1's header taller than the other months', and since each .react-datepicker__month-container is just float: left-ed independently (no shared grid row), the day grids end up vertically misaligned across months.

This is a narrower, CSS-root-cause version of what was reported (and closed as not planned) in #4222, which itself linked an earlier report in #790 — those focused on the dropdown-per-month UX question; this issue is specifically about the header-height mismatch that misaligns the day grids as a result of the current one-dropdown-only behavior.

To Reproduce
Steps to reproduce the behavior:

1. Render:

   const MultiMonthDropdown = () => {
     const [selectedDate, setSelectedDate] = useState(new Date());
   
     return (
       <DatePicker
         selected={selectedDate}
         onChange={setSelectedDate}
         monthsShown={2}
         showYearDropdown
       />
     );
   };

   (this is the docs site's own "Multiple Months with Year Dropdown" example, unmodified)
2. Open the picker and inspect the two month headers.
3. Month 1's header renders the year dropdown row; month 2's does not (intentional — only the first month renders it).
4. Measuring the rendered headers confirms the collapse:
   • Month 1 .react-datepicker__header height: 53.19px (.react-datepicker__header__dropdown height: 19px)
   • Month 2 .react-datepicker__header height: 34.19px (.react-datepicker__header__dropdown height: 0px — collapsed instead of reserving the same 19px)
5. Because of this 19px gap, the day grids that follow each header no longer start at a consistent offset relative to their own month container.

Expected behavior
All shown months should have headers of the same height regardless of which month renders the dropdown control, so the day grids line up consistently across all months.

Screenshots

Desktop (please complete the following information):

• OS: Any
• Browser: Any (Chrome, Firefox, Safari) — this is a CSS layout issue, not browser-specific
• Version: react-datepicker latest (main)

Additional context
Related reports: #4222 (closed, not planned), #790 (closed, completed — fixed a specific broken-demo instance but not this underlying behavior). Likely fix: give .react-datepicker__header__dropdown an explicit height in datepicker.scss so it reserves consistent space across all .react-datepicker__month-containers whether or not that particular month renders the dropdown.

[SaiBalaji202]

I'll work on it