JSFiddle - React, Tailwind, and code Playground

by ktpmm5

HTML

<div id="wrapper">			
<div class="main">																
<div class="shell">
<div class="container">
<div class="includeBreakingNews"></div>
<div class="content">
<h2>Media</h2>
<div id="portfolioList">

	<div class="portfolio">
    	<img src="images/image1.jpg" height="32" />  
        <div class="title-text"><a class="fancybox" "fancybox.iframe" data-width="946" data-height="680" href="#">Title of article here is much longer and so it makes thing worse</a></div> 
        <div class="authorDate">Author & date here</div> 
	</div>
	<div class="portfolio">
    	<img src="images/image1.jpg" height="32" />  
        <div class="title-text"><a class="fancybox" "fancybox.iframe" data-width="946" data-height="680" href="#">Title of article here</a></div> 
        <div class="authorDate">Author & date here</div> 
	</div>
 	<div class="portfolio">
    	<img src="images/image1.jpg" height="32" />  
        <div class="title-text"><a class="fancybox" "fancybox.iframe" data-width="946" data-height="680" href="#">Title of article here</a></div> 
        <div class="authorDate">Author & date here</div> 
	</div>
 	<div class="portfolio">
    	<img src="images/image1.jpg" height="32" />  
        <div class="title-text"><a class="fancybox" "fancybox.iframe" data-width="946" data-height="680" href="#">Title of article here</a></div> 
        <div class="authorDate">Author & date here</div> 
	</div>
</div>

CSS

.main .content { width: 60%; float: left; margin-right: 20px; }
#portfolioList { width: 100%; height: 100%;  }

#portfolioList .portfolio {
	width:40%;
	height: 40%;
	margin:1%;
	border: 1px solid #c0c0c0;
	display: inline-block;
}
.portfolio img {
		max-width:100%;
		position: relative;
		height: 32px;
}
.title-text { font-size: 100%; line-height: 100%; color:red;}
.authorDate { font-size: 100%; color:blue; line-height: 100%; }