JSFiddle - React, Tailwind, and code Playground

by reinforceyourpotential

HTML

<ul>
<li class="b-featured-article-list_article">
<img alt="Got Genius? Sun Conjuncts Mercury in Aquarius" src="http://www.ivstatic.com/files/et/imagecache/120/files/blog_articles/GotGenius.jpg"><strong class="b-featured-article-list_article_header m-t">Body &amp; Mind</strong>
<p>
<a class="m-t m-omniture_tracking" href="#/got-genius-sun-conjuncts-mercury-aquarius/2-d-d-561681" name="ast:homepagea:featartlst-bodymind">Got Genius? Sun Conjuncts Mercury in Aquarius</a>
</p>
<p>
<div class="m-t">As of February 15, both the Sun and Mercury will be hanging</div>... <a class="m-t m-omniture_tracking" href="#/got-genius-sun-conjuncts-mercury-aquarius/2-d-d-561681" name="ast:homepagea:featartlst:more">read more</a>
</p>
</li>
<li class="b-featured-article-list_article">
<img alt="Revisiting Friendships and Goals as Mercury Retrogrades Back into Aquarius" src="http://www.ivstatic.com/files/et/imagecache/120/files/blog_articles/FriendshipsGoals.jpg"><strong class="b-featured-article-list_article_header m-t">Home &amp; Family</strong>
<p>
<a class="m-t m-omniture_tracking" href="#/revisiting-friendships-and-goals-mercury-retrogrades-back-aquarius/2-d-d-561762" name="ast:homepagea:featartlst-homefamily">Revisiting Friendships and Goals as Mercury Retrogrades Back into Aquarius</a>
</p>
<p>
<div class="m-t">Mercury started its current retrograde in dreamy, romantic</div>... <a class="m-t m-omniture_tracking" href="#/revisiting-friendships-and-goals-mercury-retrogrades-back-aquarius/2-d-d-561762" name="ast:homepagea:featartlst:more">read more</a>
</p>
</li>
<li class="b-featured-article-list_article">
<img alt="Strength in Numbers as Sun in Aquarius Trines Mars in Libra" src="http://www.ivstatic.com/files/et/imagecache/120/files/blog_articles/StrengthInNumbers.jpg"><strong class="b-featured-article-list_article_header m-t">Work &amp; Money</strong>
<p>
<a class="m-t m-omniture_tracking" href="#/strength-numbers-sun-aquarius-trines-mars-libra/2-d-d-561776"...

CSS

.b-featured-article-list_article p {
    margin: 4px 0px 0px;
}
.b-featured-article-list_article_header {
    color: #DB1656;
    display: block;
    font-size: 1em;
    font-weight: bold;
    text-transform: capitalize;
}
	.b-featured-article-list_article {
    height: 1%;
    overflow: hidden;
    padding: 15px 5px 15px 0px;
    background: url('http://www.astrology.com/images/framework/block/featured-article-list/sep-text.gif') repeat-x scroll 0px 100% transparent;
}

.b-featured-article-list_article img {
	
    float: left;
    border: 1px solid #E9E9E9;
    margin: 0px 10px 0px 0px;

}
li.b-featured-article-list_article > p:nth-child(4) > span:nth-child(1){height:44px;}

JavaScript

$(document).ready(function(){
  $("li.b-featured-article-list_article > a:nth-child(6)").click(function(){
    
      $(this).prev("DIV.m-t").css("display" , "none");
  });
  $(".btn2").click(function(){
    $("p").slideDown();
  });
});