JSFiddle - React, Tailwind, and code Playground

by Varinder

HTML

<div id="news-content">
	<h1>News</h1>
	<article id="loop-news">
		<div class="img_container">
			<img src="../image1.jpg" title=""/> 
		</div>
		<div class="loop-news-content">
			<h2><a href="#" >Title of the news</a><br /></h2>
            <p class="loop-news-meta"><small>Tuesday, May, 2014</small></p>
			<p>
			This is my paragraph and I want to align it to left of my image.
			<a href="#">see more</a>
			</p>
		</div>
	</article>
	<div id="news_separator"></div>
	<article id="loop-news">
		<div class="img_container">
			<img src="../image1.jpg" title=""/> 
		</div>
		<div class="loop-news-content">
			<h2><a href="#" >Title of the news</a><br /></h2>
            <p class="loop-news-meta"><small>Tuesday, May, 2014</small></p>
			<p>
			This is my paragraph and I want to align it to left of my image.
			<a href="#">see more</a>
			</p>
		</div>
	</article>
</div>

CSS

#news-content
{
    float:left;
    width:480px;
    background:#f3f3f3;
}

#news-content h1
{
    font-size:20px;
    font-weight:100;
    margin-bottom:10px;
    color:gray;
    text-align:left;
}

#loop-news
{
    width:400px;
    /*margin-bottom:10px; moving margin to seperator*/
    /*text-align:center;*/
}

.img_container
{
    width:160px;
    height: 165px;
    float:left;
    cursor: pointer;
    border:3px solid #ccc; 
}

#loop-news h2 a
{
    font-size:20px;  
    color:#3B5998; 
    text-decoration:none;
    margin:0 auto 0 5px;
    font-weight:100;
    float:left;
}

#loop-news a
{
    font-size:14px; 
    text-decoration:none;
    margin-left:2px;
}

#loop-news #date
{
    font-size:13px; 
    font-weight:normal;
    color:#7a7a7a;  
}

#loop-news p
{
    font-size: 13px;  
    /*text-align:justify; 
    line-height:25px;
    word-spacing:-2px;
    width:300px;
    float:left;*/
    margin-left:5px;
}

#news_separator
{
	width:400px;
	margin:10px auto;
	height:1px;
	background: #d6d6d6;
}

#loop-news {
    overflow:hidden; /*quick clear fix*/
}

.loop-news-content {
    overflow:hidden;
}

#loop-news *:first-child { margin-top:0; }
#loop-news *:last-child { margin-bottom:0; }

#loop-news h2 { margin:0; }
.loop-news-meta { margin-top:0; }