<div id="wrap">

		<!-- section -->
		<div class="section">
			<div class="center">

				<div id="chat">
					<div id="chat-flex">
						<div id="chat-messages">
							<div class="chat-message">
								<span>Chat messages here / <strong>CLICK ME!!!</strong></span>
							</div>
						</div>
						<div id="chat-input">
							<div class="chat-input-line">
								<span>Chat input line</span>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
		<!--/section -->

	</div>
html,
body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	font-size: 16px;
	line-height: 1.4;
	color: #555;
	background: #fff;
}

* {
	box-sizing: border-box;
}

#wrap {
	position: relative;
}

.section {
	padding: 40px 20px;
	border-bottom: 1px solid #ddd;

	&:last-child {
		border-bottom: 0;
	}

	&--d {
		background: #000;
	}
}

#chat {
	width: 300px;
	height: 400px;
	margin: auto;
	box-shadow: 0 0 0 1px #ccc;
	background: #fafafa;
	border-radius: 4px;
	overflow: hidden;

	&-flex {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	
	&-messages {
		background: #f5f5f5;
		flex-grow: 1;
	}
	
	&-input {
		background: #fff;
	}
}

.chat-message {
	padding: 10px;
}

.chat-input-line {
	padding: 10px;
	
	&--new {
		background: #f00;
		animation: newLine .4s ease;
		animation-fill-mode: forwards;
		@keyframes newLine {
			to {
				background: fade(#f00, 0%);
			}
		}
	}
}
View Compiled
$(function () {
	$('#chat').click(function () {
		$('.chat-input-line').last().clone().addClass('chat-input-line--new').appendTo('#chat-input');
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js