JSFiddle - React, Tailwind, and code Playground

HTML

<div class="chat">
				<div class="bar">
					<div class="title">
						<span class="name">Random Chat</span>
					</div>
				</div>
				<div class="options">
					
				</div>
				<div class="room">
					<div class="post other" id="1">
						<div class="content">
							<span class="note">Hi there!</span>
						</div>
						<div class="details">
							<div class="poster">
								<span class="name">Bob</span>
							</div>
							<div class="time">
								<span class="time">9:32</span>
							</div>
						</div>
					</div>
					<div class="post self" id="2">
						<div class="content">
							<span class="note">Hi Bob</span>
						</div>
						<div class="details">
							<div class="time">
								<span class="time">12:32</span>
							</div>
						</div>
					</div>
					<div class="post self" id="3">
						<div class="content">
							<span class="note">How are you doing?</span>
						</div>
						<div class="details">
							<div class="time">
								<span class="time">9:33</span>
							</div>
						</div>
					</div>
					<div class="post other" id="4">
						<div class="content">
							<span class="note">Great!</span>
						</div>
						<div class="details">
							<div class="poster">
								<span class="name">Bob</span>
							</div>
							<div class="time">
								<span class="time">9:32</span>
							</div>
						</div>
					</div>
				</div>
				<div class="message">
					<div class="input">
						<input type="text" placeholder="Send a message" />
					</div>
				</div>
			</div>

CSS

.wrapper {
	position: relative;
}

.chat {
	width: 267px;
	height: 380px;
	bottom: 0px;
	right: 25px;
	
	position: absolute;
	
	font-family: Arial, sans-serif;
	font-size: 14px;
	color: #262626;
	
	border: 0.3px solid rgb(64, 64, 64);
}

.chat .bar {
	width: 100%;
	height: 36px;
	padding: 9px;
	
	background-color: rgb(64, 64, 64);
	color: white;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.chat .options {
	width: 100%;
	height: 36px;
	padding: 9px;
	
	background-color: rgb(236, 239, 241);
	color: white;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2); 
	
	z-index: 1000;
}

.chat .room {
	width: 100%;
	height: 268px;
	padding: 9px;
	
	background-color: rgba(235,239,242,0.6);
	color: black;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.chat .room .post .content {
	display: inline-block;
	
	font-size: 13px;
	color: #262626;
	
	border-radius: 3px;
	padding: 8px;
}

.chat .room .other .content {
	background-color: rgb(255, 255, 255);
}

.chat .room .self .content {
	background-color:rgb(207, 216, 220)
}

.chat .room .self {
	position: absolute;
	right: 8px;
}

.chat .room .post .details {
	padding-left: 8px;
	padding-top: 1px;
}

.chat .room .self .details {
	position: absolute;
	right: 8px;
}

.chat .room .post .details div {
	display: inline-block;
}

.chat .room .post .details div span {
	font-size: 11px;
	color: rgba(0,0,0,.54);
}

.chat .message{
	width: 100%;
	height: 38px;	
	
	background-color: transparent;
	color: black;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.12), 0px 4px 4px 0px rgba(0, 0, 0, 0.24);
}

.chat .message .input {
	position: absolute;
	bottom: 0px;
	
	width: 100%;
}

.chat .message .input input {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing:...

JavaScript

/*

As you can see, there are a few problems with this 'chat'
 1. The "Hi Bob" is appearing behind the "How are you doing message". You can see this because their is overlapping text.
 2. The "How are you doing?" message and the "Great!" message are rendering at the same height.
 
 */