My challenge lies in getting an input box to expand across the entire width of the screen. Unfortunately, due to the elements it is enclosed within, the input box only occupies a small portion of the screen. Moreover, when it expands, it also pulls the surrounding items along with it. I've experimented with various CSS properties such as flex-stretch and align-items: stretch, but none of them seem to resolve the issue. Even isolating the input box within its own div did not produce the desired effect.
Clicking on the Reply button in the code snippet below will illustrate the exact problem:
CSS styles affecting the layout...HTML code featuring user replies...