JSFiddle - React, Tailwind, and code Playground

HTML

<article>
   <a href="#" class="article">Project name a</a><p>| Project description</p><span class="date">12.01.11</span>    
   <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.    <a href="#">View</a></h3>
</article>
<article>
   <a href="#" class="article">Project name a</a><p>| Project description</p><span class="date">12.01.11</span>    
   <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.    <a href="#">View</a></h3>
</article>

CSS

.date{float: right; color: #999999;}
a{float: left; display: inline; margin: 0 5px 0 0;} 
p{float: left; display: inline; margin: 0;}   

article{width: 100%; float: left; clear: left;}
article h3{clear: both; float: left; display: inline; margin: 10px 0;}
article h3 a{float: none;}

JavaScript

$(document).ready(function() {    
    //hides articles
    $('article h3').hide();  
    //article accordian
    $('article a').click(function() {
        $(this).find('h3').slideToggle('fast');
    });
});