To truly grasp the issue I'm facing, it's best to watch the following videos:
video of content inside input pushes up div of messages - NOT WORKING
If you want to see how I envision it working correctly, check out this video from discord.com chat community:
The way it should work
My setup involves TailWindCSS and a basic grid with 3 columns, but by watching these videos, the issue and desired outcome will become clear.
<div class="grid grid-cols-3 gap-2 mx-2">
<div>
// lots of clients
</div>
<div>
<div>lots of messages - this needs to scroll also</div>
<input type="text"></input>
</div>
</div>
If anyone could provide a codepen, sandbox, jsbin, or any tool to assist, it would be greatly appreciated!