<div class="author">
	<img class="author__item author__pic" src="https://en.gravatar.com/userimage/137371786/7395c6c605915c6315f96d8cd8f6ada9.jpg?size=200" alt="my face"/>
	<div class="author__item author__name">
		<b class="author__heading">Author:</b><br/>
		<a class="author__link" rel="author" href="//brettanda.ca" target="_blank">Brett Anda</a>
	</div>
	<div class="author__item author__date">
		<b class="author__heading">Date Posted:</b><br/>
		Today
	</div>
</div>
.author {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	
	@media all and (max-width: 600px) 	{
		flex-flow: column nowrap;
		text-align: center;
	}
}

.author__item {
	flex: 0 1 8rem;
	margin: 1rem;
	
	@media all and (max-width: 600px) {
		flex: 1 1 3rem;
		margin: 0.5rem;
	}
}

.author__pic {
	flex-shrink: 0;
	flex-basis: 8rem;
	object-fit: cover;
	object-position: center;
	width: 8rem;
	height: 8rem;
	border-radius: 50%;
	padding: 0.3rem;
	border: 2px solid rgba(0,0,0,0.5);
}

.author__heading {
	font-size: 90%;
	display: inline-block;
	margin-bottom: 0.5rem;
}

.author__link {
	text-decoration: none;
	color: blue;
	
	&:hover,
	&:focus {
		text-decoration: underline;
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.