JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="chat">
        <div class="title">This is the chat title</div>
        <div class="text">
            <p>Text 1</p>
            <p>Text 2</p>
            <p>Text 3</p>
        </div>
        <div class="chatbox">
            <input type="text" />
        </div>
    </div>
    <div class="chat">
        <div class="title">This is the chat title</div>
        <div class="text" style="height:250px">
            <p>Text 1</p>
            <p>Text 2</p>
            <p>Text 3</p>
        </div>
        <div class="chatbox">
            <input type="text" />
        </div>
    </div>
</div>

CSS

#container { position: fixed; bottom:0; left:0; right:0; }
.chat { border: 1px solid #999; right:0; position: absolute; bottom: 0; margin: 0 5px; }
.title { padding: 0.5em; background-color: blue; color: white; }
.text { padding: 10px; }