I'm facing an issue where I have a parent element set to display as table-cell, and within it, I have a dropdown child element that I want to expand to occupy the entire available space within the parent element. Despite trying various solutions such as setting the child element's width to 100% or adjusting its display and positioning properties, I am still unable to make it fill the entire space.
You can see the problem in action in this sandbox: https://codesandbox.io/s/serene-hermann-b61vwr?file=/src/App.js
The size of the dropdown does not match that of the table cell, resulting in a strange appearance. How can I resolve this issue?