<div class='phone'>
	<div class='top-bar'>
		<p>David</p>
	</div>
	<div class='messages'>
		<div class='message'>
			<div class='content from-you'>
				<p>Hello</p>
			</div>	
		</div>
		<div class='message'>
			<div class='content from-other'>
				<p>Hi</p>
			</div>	
		</div>
		<div class='message'>
			<div class='content from-you'>
				<img src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png' />
				<p>Bla Bla Bla</p>
			</div>	
		</div>
	</div>
	<div class='text-input'>
		<div class='field'>
			<label for='inputFile'><i class="fa fa-camera" aria-hidden="true"></i></label>
			<input type='file' id='inputFile' class='hidden' />
		</div>
		<div class='field text'>
			<input type='text' id='inputText' placeholder='Insert Message' />
		</div>	
		<div class='field'>
			<label for='inputSend'><i class="fa fa-paper-plane" aria-hidden="true"></i></label>
			<input type='submit' id='inputSend' class='hidden' />
		</div>
	</div>	
</div>	
$red: #ef5285
$green: #60c5ba
$blue: darken(#a5dff9, 25%)

*
	box-sizing: border-box

.hidden
	display: none

body
	min-height: 100vh
	display: flex
	justify-content: center
	align-items: center
	flex-direction: column

.phone
	widtH: 320px
	heighT: 568px
	display: flex
	flex-direction: column
	box-shadow: 0px 1px 10px rgba(0,0,0,0.35)
	img
		max-widtH: 100%
	.top-bar
		color: white
		padding: 10px 20px
		background: $green
	.text-input
		display: flex
		widtH: 320px
		height: 49.61px
		box-shadow: 0px 1px 10px rgba(0,0,0,0.35)
		.field
			display: flex
			height: 40px
			&.text
				width: 100%
				height: 40px
			input[type='text']
				widtH: 100%
				padding: 5px 0
				border: none
				outline: 0
			label
				width: 40px
				height: 40px
				transition: 0.15s ease-in-out
				display: flex
				align-items: center
				justify-content: center
				&:hover
					color: $blue
	.messages
		overflow-y: auto
		height: 100%
		padding: 10px 0
		.message
			display: flex
			flex-direction: column
			padding: 10px
			.content
				padding: 5px 10px
				max-width: 75%
				min-width: 20%
				color: white
				border-radius: 5px
				border-bottom-right-radius: 0px
				position: relative
				p
					margin: .5em 0
					hyphens: auto
					-moz-hyphens: auto
				&:after
					content: ''
					display: block
					width: 0
					height: 0
					border-top: 6px solid $blue
					border-right: 10px solid transparent
					position: absolute
					bottom: 0
					right: 0
					transform: translate(0px, 100%)
				&.from-you
					align-self: flex-end
					background: $blue
					text-align: right
					&:after
						border-top: 6px solid $blue
						border-right: none
						border-left: 10px solid transparent
				&.from-other
					align-self: flex-start
					background: $red
					border-bottom-right-radius: 5px
					border-bottom-left-radius: 0
					&:after
						right: inherit
						left: 0
						border-top: 6px solid $red
				img
					background: white
					padding: 20px
					margin: 0.5em 0
					margin-bottom: 0
View Compiled
$("input[type='submit']").on('click', function(e){
	e.preventDefault();
	var inputVal = $("#inputText").val();
	$(".messages").append('<div class="message"><div class="content from-you"><p>'+inputVal+'</p></div></div>');
	$(".messages").animate({scrollTop: $(".messages").height()}, 500);
	setTimeout( function(){
		$(".messages").append('<div class="message"><div class="content from-other"><p>This is a response. Well, not really but whatever</p></div></div>');
		$(".messages").animate({scrollTop: $(".messages").height()}, 1500);
	}, 1500);
});
Rerun