JSFiddle - React, Tailwind, and code Playground

HTML

<div id="chatBar">
    <div id="chatList">
      <div class="chat mine">hello world</div>
      <div class="chat theirs">hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon  moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moon hello moonhello moon hello moon hello moon hello moon hello moon hello moon hello moon  </div>
    </div>
    <input id="chatBarInput" class="form-control" type="textarea">
  </div>

CSS

html, body { height: 100%; }

body { margin: 0; }

#chatBar {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  xjustify-content: flex-end;
  overflow: none;
}

#chatList {
  flex: 0 1 75px;
  display: flex;
  flex-flow: column nowrap;
  xjustify-content: flex-end;
  overflow-y: scroll;
}

#chatBarInput {
  flex: 1 0 auto;
}

.chat {
  flex: none;
  align-self: flex-start;
  background-color: lightgreen;
}

.chat.mine {
  align-self: flex-end;
  background-color: pink;
}