CodePen

HTML

            
              <div class="contentlast">
	<div class="conlastbase">
		All Posts
		<ul class="conlast">
			<li class="conlast-item">
				<div class="l-left">
					<div class="conlast-details">
						Name
						<div class="sub">Subject</div>
					</div>
				</div>
				<div class="l-right">
					<div class="conlast-date">
						2<sup>nd</sup> May 2013
					</div>
				</div>
			</li>
			<li class="conlast-item">
				<div class="l-left">
					<div class="conlast-details">
						Name
						<div class="sub">Subject</div>
					</div>
				</div>
				<div class="l-right">
					<div class="conlast-date">
						2<sup>nd</sup> May 2013
					</div>
				</div>
			</li>
			<li class="conlast-item">
				<div class="l-left">
					<div class="conlast-details">
						Name
						<div class="sub">Subject</div>
					</div>
				</div>
				<div class="l-right">
					<div class="conlast-date">
						2<sup>nd</sup> May 2013
					</div>
				</div>
			</li>
			<li class="conlast-item">
				<div class="l-left">
					<div class="conlast-details">
						Name
						<div class="sub">Subject</div>
					</div>
				</div>
				<div class="l-right">
					<div class="conlast-date">
						2<sup>nd</sup> May 2013
					</div>
				</div>
			</li>
			<li class="conlast-item">
				<div class="l-left">
					<div class="conlast-details">
						Name
						<div class="sub">Subject</div>
					</div>
				</div>
				<div class="l-right">
					<div class="conlast-date">
						2<sup>nd</sup> May 2013
					</div>
				</div>
			</li>
			<li class="conlast-item">
				<div class="l-left">
					<div class="conlast-details">
						Name
						<div class="sub">Subject</div>
					</div>
				</div>
				<div class="l-right">
					<div class="conlast-date">
						2<sup>nd</sup> May 2013
					</div>
				</div>
			</li>
			<li class="conlast-item">
				<div class="l-left">
					<div class="conlast-details">
						Name
						<div class="sub">Subject</div>
					</div>
				</div>
				<div class="l-right">
					<div class="conlast-date">
						2<sup>nd</sup> May 2013
					</div>
				</div>
			</li>
		</ul>
	</div><!--Conlastbase-->
</div><!--Contentlast-->
            
          
!

CSS

            
              
@media only screen and (max-width: 481px) {
.contentlast{
	width:100%;
	margin-top:10px;
	margin-left:0px;
}
}
@media only screen and (max-width: 769px) {
.contentlast{
	width:100%;
	margin-top:10px;
	margin-left:0px;
}
}
.conlastbase{
	padding:inherit;
	list-style:none;
}
.conlast li{
	background: url(../images/defaultPhoto.jpg) no-repeat, url(../images/arrow.png) no-repeat, #EEEEEE;
	background-size:contain;
	background-position:0px,42px;
	padding-left:60px !important;
	opacity:1;
	display:block;

	margin-top:1px;
	margin-left:-40px;
	font-size:14pt;
	font-family:Calibri;
	color:#000;
}
.conlast li:hover{
	background-color:#999;
}

.sub{
	font-size:12pt;
	font-weight:lighter;
}
.date{
	float:right;
	font-size:11pt;
	font-weight:normal;
}

/* editions */
.conlast-item {
  clear: both;
  height: 60px;
  line-height: 60px;
}

.conlast-details, .conlast-date {
  display: inline-block;
  line-height: normal;  
  vertical-align: middle;
}

.l-left {
  float: left;
}

.l-right {
  float: right;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................