<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');
});
});
This Pen doesn't use any external CSS resources.