CSS Message Box

by Mabuti

HTML

<div class="message-box">
    <div class="left-message-arrow"></div>
    <div class="left-message-box">
        <div class="message-box-avatar">AVATAR</div>
        <div class="message-box-datetime">July 14, 2014 2:27 PM</div><br>
        <div class="message-box-spacer"></div>
        <div class="message-box-text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum massa nibh, vestibulum sed volutpat a, ultrices ac turpis. Curabitur in felis enim. Donec ullamcorper lacus massa, ultricies ullamcorper orci gravida ut. Pellentesque a enim urna. Phasellus commodo tortor quis vulputate ultricies. Nulla vitae egestas enim, in lacinia nisi. Pellentesque sed augue eget neque dictum laoreet. Aliquam tincidunt malesuada odio ac sollicitudin. Vivamus et magna tempus, placerat lorem sit amet, elementum elit.
        </div>
    </div>
</div>
<br>
<div class="message-box">
    <div class="right-message-box">
        <div class="message-box-avatar">AVATAR</div>
        <div class="message-box-datetime">July 14, 2014 2:27 PM</div><br>
        <div class="message-box-spacer"></div>
        <div class="message-box-text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum massa nibh, vestibulum sed volutpat a, ultrices ac turpis. Curabitur in felis enim. Donec ullamcorper lacus massa, ultricies ullamcorper orci gravida ut. Pellentesque a enim urna. Phasellus commodo tortor quis vulputate ultricies. Nulla vitae egestas enim, in lacinia nisi. Pellentesque sed augue eget neque dictum laoreet. Aliquam tincidunt malesuada odio ac sollicitudin. Vivamus et magna tempus, placerat lorem sit amet, elementum elit.
        </div>
    </div>
    <div class="right-message-arrow"></div>
</div>

CSS

.message-box {
	display: table;
    font-size: 0;
    padding: 4px;
    color: #000;
}

.message-box-text {
    font-size: 15px;
    padding: 10px;
	width: 225px;
    display: table-cell;
    vertical-align: bottom;
}

.message-box-avatar {
	width: 75px; 
    font-size: 8px;
    display: table-cell;
    vertical-align: top;
}

.message-box-datetime {
    font-size: 8px;
    display: table-cell;
    vertical-align: top;
	width: 225px;
    text-align: right;
}

.message-box-spacer {
	width: 75px; 
    font-size: 8px;
    display: table-cell;
    vertical-align: middle;
}

.left-message-arrow {
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-bottom: 20px solid #e6e6e6;
    padding: 0px;
    margin: 0px;
    display: table-cell;
    vertical-align: bottom;
}

.left-message-box {
	width: 300px;
    background-color: #e6e6e6;
    margin: 0px;
}

.right-message-arrow {
	width: 0; 
	height: 0; 
	border-right: 20px solid transparent;
	border-bottom: 20px solid #fbb03b;
    display: table-cell;
    vertical-align: bottom;
}

.right-message-box {
	width: 300px;
    background-color: #fbb03b;
    padding: 0px;
    margin-left: 20px;
}