JSFiddle - React, Tailwind, and code Playground

by ktpmm5

HTML

<div id="portfolioList">

	<div class="portfolio">
    	<img src="images/image1.jpg" height="32" />  
        <div class="title-text">Article One</a></div> 
        <div class="authorDate">Author & date here</div> 
	</div>
	<div class="portfolio">
    	<img src="images/image1.jpg" height="32" />  
        <div class="title-text">Article Two  is very long also</a></div> 
        <div class="authorDate">Author & date here</div> 
	</div>
 	<div class="portfolio">
    	<img src="images/image1.jpg" height="32" />  
        <div class="title-text">Article three's title is really long so it throws everything off</a></div> 
        <div class="authorDate">Author & date here</div> 
	</div>
 	<div class="portfolio">
    	<img src="images/image1.jpg" height="32" />  
        <div class="title-text">Title of article here</a></div> 
        <div class="authorDate">Author & date here</div> 
	</div>
    </div>

CSS

#portfolioList { width: 100%; height: 100%;  }

#portfolioList .portfolio {
	width:40%;
	height: 110px;
	margin:1%;
	border: 1px solid #c0c0c0;
	display: inline-block;
    background: #c0c0c0;
    padding: 3px;
}
.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%; }