JSFiddle - React, Tailwind, and code Playground
HTML
<div id="content1">
<h1>News</h1>
<article class="news">
<div class="image_container">
<img src="../image3.jpg"/>
</div>
<h2><a href="#" >Title</a><br /></h2>
<span>Date</span>
<p> This is my Paragraph... <a href="#">Read more....</a> </p>
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-type="button"></div>
<div id="separator"></div>
</article>
<article class="news">
<div class="image_container">
<img src="../image3.jpg"/>
</div>
<h2><a href="#" >Title</a><br /></h2>
<span>Date</span>
<p> This is my Paragraph... <a href="#">Read more....</a> </p>
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-type="button"></div>
<div id="separator"></div>
</article>
</div>
CSS
#content1
{
float:left;
width:870px;
background:yellow;
}
#content1 h1
{
font-size:23px;
font-weight:100;
margin-bottom:10px;
}
.news
{
height:auto;
position:relative;
margin-bottom:10px;
}
.image_container
{
width: 160px;
height: 165px;
float: left;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
margin-right:20px;
border:3px solid #f3f3f3;
margin-top:4px;
}
.news h2 a
{
font-size:21px;
color:#3B5998;
text-decoration:none;
margin-left:0;
font-weight:100;
}
.news p
{
font-size: 18px;
text-align:justify;
margin-top:5px;
margin-bottom:5px;
line-height:25px;
word-spacing:-2px;
}
.fb-share-button
{
text-decoration:none;
}
#separator
{
width:870px;
margin:14px auto 10px auto;
height:1px;
background: #f3f3f3;
}
JavaScript
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));