😊 Please help with CSS formating for FORM in a DIV

I have the HTML code below:

The goal is to have the checkbox pack it horizontally so that it doesn’t bump up against the submit button. There is absolutely no tying here.

Only the textbox and post button did resize as the window’s size changes, and only the textbox will.

The Element element’s refusal to expand horizontally to fill the DIV has been a constant failure for me despite my various iterations of CSS3.

This issue is constant across all of my computers, desktop and mobile.

We frequently see chatbox interfaces that are exactly as I describe them, so I’m sure there is a remedy. All it seems like is going to be is something fiddly.

I appreciate you helping me greatly.

Somebody will probably include a more skilled response, but perhaps something like this.

CSS

#chat-form { display: flex; column-gap: 5px;}#user-input { padding: 5px; flex-grow: 1;}

Owing you for your fast reply, but, unfortunately, that doesn’t work.
See how everything is stacked to the left?

The goal is to have the botton securely pinned to the right while the text field develops from left to right.

Is there a way to make it more similar?

Yes it does: )

If it doesn’t work for you, we would need to see all the models you already have in place. Perhaps a parent has limited the length or you have more stringent codes in position.

Beautiful! What a great resource!
Fine. I posted my cause using your CodePen, but the issue persists.
I hope that I may embed this correnctly:

Delete align-items: center;

Alternatively add align-self: stretch; to the form.

That made it easier to get the case to work.

After that, the actual site I’m working on still needs some adjustments to the cushions and margins, but I think you guys have given me a solid foundation to work from.

If I run into someone painfully difficult, I know where to return to!

Thanks!
( PS: I only just started joining just before I posted, so you guys helped me get there. ))