Untitled

dabblet.css

body { width: 400px; margin: 40px; font-family: helvetica; }
a { color: #FFF; }
ul { margin:0; padding:0; list-style-type:none; }

.noti-slat {
	background: black;
	color: #FFF;
	margin-bottom: 10px;
	overflow: hidden;
}

.noti-slat-thumb {
	float: left;
	margin-right: 10px;
	height: 100%;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.img { vertical-align: middle; }


.noti-slat-message {
	padding-left: 50px;
	height: 100%;
}

.noti-slat-message p {
	vertical-align: middle;
}

.noti-slat-ico {
	display: none;
}

.img { width: 42px; height: 42px; background-color:red; display: inline-block;}
.icon { width: 16px; height: 16px; background-color:blue; display: block;}
p {margin: 0}

dabblet.html

<ul class="noti-slats">
<li class="noti-slat">
	<div class="noti-slat-thumb"><span class="helper"></span><span class="img"></span></div>
	<div class="noti-slat-message"><span class="helper"></span><p>Storybird returned your story <a href="#">I know it now</a>.</p></div>
	<div class="noti-slat-ico"><span class="icon"></span></div>
</li>
<li class="noti-slat">
	<div class="noti-slat-thumb"><span class="img"></span></div>
	<p class="noti-slat-message">Storybird returned your story <a href="#">I know it now</a> for identifying information. Storybird returned your story <a href="#">I know it now</a> for identifying information.</p>
	<div class="noti-slat-ico"><span class="icon"></span></div>
</li>
</ul>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}