JSFiddle - React, Tailwind, and code Playground

HTML

<article id="workPort">

  	<section class="fluid workSect" id="outerSectLogo">
    	<h2>Logo - Business Card Design</h2>
        <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg">
        <hr>
        <section class="fluid innerSect" id="innerSectLogo">
        <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. </p>
        <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. </p>
        <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. </p>
    </section>
  </section>

      	<section class="fluid workSect" id="outerSectCovers">
    	<h2>Publication Covers</h2>
        <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg">
        <hr>
        <section class="fluid innerSect" id="innerSectCovers">
        <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. </p>
        <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. </p>
        <p>Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. Some content. </p>
    </section>
    </section>

      	<section class="fluid workSect" id="outerSectBook">
    	<h2>Book Covers</h2>
        <img src="imgs/elements/arrow_right.png" width="20px" height="20px" class="arrowImg">
        <hr>
   ...

CSS

#workPort{
	width:100%;
	display:block;
	float:left;
	text-align:left;
}

.workSect {
	float:left;
	display:block;

}

.workSect h2 {
	display:inline;
	cursor:pointer;
}

.arrowImg {
	display:inline;
	cursor:pointer;
}

.innerSect {
	visibility:hidden;
	display:none;
}
.innerSectVis {
	visibility:visible;
}
#innerSectLogo{

}

JavaScript

$(document).ready(function(){
   $(".workSect").click(function() {
       $(this).find(".innerSect").first().css({'visibility' : 'visible', 'display' : 'inline'});
   });
});