Untitled

dabblet.css

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

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

.noti-slat-thumb {
	display: inline-block;
	vertical-align: middle;
	height: 100%;
	margin-right: 10px;
}

.img { display: inline-block; }

.noti-slat-message {
	height: 100%;
}

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

.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

.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;}

dabblet.html

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

settings.json

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