JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<ul id="news" class="ul_reset">
    <li class="text">
        	<h2><a href="#">Item #1</a></h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ducimus, tempore vitae veniam? Modi nostrum vitae exercitationem consequatur laboriosam dignissimos, voluptatum ea recusandae tenetur tempora nisi porro, explicabo perferendis. Ratione.<span class="date">12/34/5678</span>

        </p>
    </li>
    <li class="text">
        	<h2><a href="#">Item #1</a></h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ducimus, tempore vitae veniam? Modi nostrum vitae exercitationem consequatur laboriosam dignissimos, voluptatum ea recusandae tenetur tempora nisi porro, explicabo perferendis. Ratione.<span class="date">12/34/5678</span>

        </p>
    </li>
    <li class="text">
        	<h2><a href="#">Item #1</a></h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ducimus, tempore vitae veniam? Modi nostrum vitae exercitationem consequatur laboriosam dignissimos, voluptatum ea recusandae tenetur tempora nisi porro, explicabo perferendis. Ratione.<span class="date">12/34/5678</span>

        </p>
    </li>
    <li class="text">
        	<h2><a href="#">Item #1</a></h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ducimus, tempore vitae veniam? Modi nostrum vitae exercitationem consequatur laboriosam dignissimos, voluptatum ea recusandae tenetur tempora nisi porro, explicabo perferendis. Ratione.<span class="date">12/34/5678</span>

        </p>
    </li>
    <li class="text">
        	<h2><a href="#">Item #1</a></h2>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ducimus, tempore vitae veniam? Modi nostrum vitae exercitationem consequatur laboriosam dignissimos, voluptatum ea recusandae tenetur tempora nisi...

SCSS

// Fonts
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300);
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,700);

// Variables
$ContentFont: 'Roboto', sans-serif;
$HeadingFont: 'Oswald', sans-serif;
$Blue: #0013c7;

.ul_reset {
    margin: 0;
    padding: 0;
    list-style: none;
}
.cf {
    clear: both;
}

* {
    box-sizing: border-box;
    font-family: $ContentFont;
}
h1, h2, h3, h4, h5, h6{
	font-family: $HeadingFont;
	font-weight: lighter;
}
ul#news {
    li {
        background-color: #fff;
        border: 1px solid #dfdfdf;
        float: left;
        padding: 20px;
        position: relative;
        width: calc(50% - 10);
        margin-right: 10px;
        margin-bottom: 10px;
        &:nth-child(2n) {
            margin-right: 0;
        }
        h2 {
            margin-top: 0;
            margin-bottom: 5px !important;
            display: block;
            a {
                text-decoration: none;
                font-size: 30px;
                color: $Blue;
                display: block;
            }
            &:hover a {
                color: lighten($Blue, 30);
            }
        }
        p {
            margin-top: 0;
            span.date {
                display: block;
                text-align: right;
                font-weight: lighter;
                color: $Blue;
                margin-top: 10px;
            }
        }
    }
}

JavaScript

$("ul#news").masonry({
    itemSelector: 'li'
});