I'm learning how to use React, and as a project, I am building a frontend for an association. One of the pages uses a calendar to select a date range. I used react-calendar, but in a recent meeting one of the users suggested to also include two <input type='date' /> in the calendar, to provide an alternate option to select the date range. It is easy enough to use the same values to control both the calendar and the inputs, my issue is more visual.
The calendar has two main components, the navigation component on top, and the day tiles below. The parent div has display: flex. Ideally, the inputs would also be children of the Calendar component, but I do not know if it is possible to achieve this effect.
Even though I could use position: absolute and just place it in the right spot, this effect would only be achieved in my monitor, as far as I can tell.
The image show the Calendar Component that I am trying to change. The inputs could be between the navigation child (top) and the board child (bottom)