JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sidebar">
  <div class="chat-holder">
    <div class="chat-messages">
    </div>

    <div class="chat-entry">
    </div>
  </div>
</div>

CSS

body{
  padding:0; margin:0;
}

.sidebar{
  width:50%;
  height:500px;
  background:purple;
}

.chat-messages{
  height:85%;
  width:100%;
  background:yellow;
}

.chat-entry{
  height:15%;
  width:100%;
  background:red;
}

.chat-holder{
  margin:10px;
  height:100%;
  box-sizing:border-box;
}