JSFiddle - React, Tailwind, and code Playground

HTML

<div id="chatContainer">
  <div class="chat" id="{id}">
    <div class="chat-title"> <span>{title}</span>
        <input  class="minimize" name="" value="min" type="button">
    </div>
    <div class="chat-content">  
        <div class="text"> </div>
        <div class="chatbox">
          <input type="text" class="inputText"  placeholder="enter text" />
        </div>
    </div>    
  </div>
      
  <div class="chat" id="{id}">
    <div class="chat-title"> <span>{title}</span>
        <input  class="minimize" name="" value="min" type="button">
    </div>
    <div class="chat-content">  
        <div class="text text-higher"> </div>
        <div class="chatbox">
          <input type="text" class="inputText"  placeholder="enter text" />
        </div>
    </div>    
  </div>    
</div>

CSS

*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#chatContainer {
   position: fixed;
    bottom:0;
    right: 0; 
}
.chat {
	border: 1px solid #999;
	display: inline-block;
  vertical-align: bottom;
	margin: 0 5px;
	height: auto;
	width: 250px;
}
.chat-title {
	padding: 0.5em;
	background-color: blue;
	color: white;
}
.chat-content{
    height: auto
}
.text {
	padding: 10px;
	overflow-y: scroll;
	overflow-x: hidden;
	height: 120px;
}
.text-higher{
    height: 200px;
}
.inputText {
	width: 100%
}

JavaScript

$(document).on('click', '.minimize', function(e) {
		$('.chat-content',$(this).parents('.chat')).slideToggle();
	});