Write less, Do More by HTML/CSS

dabblet.css

/**
 * Write less, Do More by HTML/CSS
 */

ul {list-style:none;}
ul li { border-bottom:1px solid #ddd;}
ul li article {position:relative; padding:5px 0 10px 230px; min-height:150px;}
article h3 {margin-top:10px;}
ul li article h3 img {position:absolute; left:0; top:0; border:5px solid transparent; box-shadow:0 0 10px rgba(0,0,0,0.5); border-radius:5px;}
article h3 a {text-decoration:none; color:#003399;}
article h3 a:hover {text-decoration:underline;}
article h3 a::after {content:attr(data-read-more);position:absolute; left:230px; bottom:5px; font-size:80%; color:#777;}
article h3 a:hover::after {color:#444;}
article p {line-height:150%;}

dabblet.html

<ul>
<li><article id="blablabla">
<h3><a data-read-more="Read More" href="#">Mauris non lectus et elit vulputate placerat. Fusce at nibh sed tellus
<img src="http://behance.vo.llnwd.net/profiles12/278983/projects/863938/e7c6d0a1b7db137c5d09a893f193f7cf.jpeg" width="200" />
</a></h3>
<p>Donec ornare condimentum porta. Pellentesque et purus lectus. Nullam adipiscing tristique euismod. Praesent nec risus eros. Nam augue tortor, congue eu facilisis nec, consequat non risus. Fusce arcu nulla, feugiat sed blandit non, iaculis et felis. Curabitur laoreet enim vitae est pulvinar scelerisque. Etiam id viverra justo. Donec justo purus, aliquet nec cursus non, rhoncus eget arcu. Etiam eu mauris risus.
</p>
</article></li>
</ul>

settings.json

{"view":"split","prefixfree":"1","page":"result"}