JSFiddle - React, Tailwind, and code Playground

HTML

<div id="news-content">
     <h1>News</h1>

    <article id="loop-news">
        <div class="img_container">
            <img src="../image1.jpg" title="" />
        </div>
         <h2><a href="#" >Title of the news</a><br /></h2>
 <span id="date">Tuesday, May, 2014</span>

        <p>This is my paragraph and I want to align it to left of my image. <a href="#">see more</a>

        </p>
    </article>
    <div id="news_separator"></div>
    <article id="loop-news">
        <div class="img_container">
            <img src="../image1.jpg" title="" />
        </div>
         <h2><a href="#" >Title of the news</a><br /></h2>
 <span id="date">Tuesday, May, 2014</span>

        <p>This is my paragraph and I want to align it to left of my image. <a href="#">see more</a>

        </p>
    </article>
</div>

CSS

#news-content {
    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;
}
.img_container {
    width:160px;
    height: 165px;
    float:right;
    cursor: pointer;
    border:3px solid #ccc;
    margin: 0 0 20px 5px;
}
#loop-news h2 a {
    font-size:20px;
    color:#3B5998;
    text-decoration:none;
    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;
    padding:0 5px 0;
}
#news_separator {
    clear:both;
    width:400px;
    margin:0 auto;
    height:1px;
    background: #d6d6d6;
}
#loop-news h2 {
    margin-bottom:0;
}