JSFiddle - React, Tailwind, and code Playground

HTML

<body>

        <div id="content">

            <div id="navbar">

            Rooms

            </div>

            <div id="middlePart">

                <div id="chatText">

                    <div class="chatLine">

                        <div class="personWhoSaidIt">

                        Fooman

                        </div>

                        <div class="chatText" >

                        I like cats?

                        </div>

                    </div>

                    <div class="chatLine">

                        <div class="personWhoSaidIt">

                        Moo

                        </div>

                        <div class="chatText">

                        I like cows. They moo every time and that makes me feel good because I like hearing cows moo. I also like eating my cows - delicious! This is just to test what happens if the width of the text is really, really long. Ideal behaviour should be that there are no scrollbars.

                        </div>

                    </div>

                    <div class="chatLine">

                        <div class="personWhoSaidIt">

                        Foo

                        </div>

                        <div class="chatText">

                        Good for you! Oh no there is a problem. The text doesn't extend the height of the chat line, so it overlaps! :(

                        </div>

                    </div>

                </div>

                <div id="sidebar">

                Sidebar Content<br />Line Two

                </div>

            </div>

            <div id="chatbar">

            <form>

            <input type="text" name="inputTxt" size="200" />

            </form>

            </div>

        </div>

    </body>

CSS

* {

        margin:0px;

        paddling:0px;

        overflow:hidden;

    }

    div#navbar {

        top:0px;

        left:0px;

        height:30px;

        background-color: #d8da3d;

        font-family: "Arial";

        font-size: 14pt;

    }

    div#middlePart {

        top:30px;

        left:0px;

        right:0px;

        bottom:0px;

    }

    div#chatText {

        top:0px;

        bottom:0px;

        left:0px;

        width:70%;

        overflow-y:auto;

    }

    div#sidebar {

        top:0px;

        bottom:0px;

        right:0px;

        width:30%;

        overflow-y:auto;

    }


    div#chatbar {

        position:absolute;

        bottom:0px;

    }

    .personWhoSaidIt {
        position:absolute;
        display:inline;
        text-align:left;

    }

    .chatText {
        display:block;
        margin-left: 120px;

    }