<h3>Scroll horizontally &#x20D7; over the article</h3>
<div class="wrapper">

	<article>
		<div class="title">AVOCADO</div>
		<p>The avocado (Persea americana) is a tree, long thought to have originated in South Central Mexico, classified as a member of the flowering plant family Lauraceae. The fruit of the plant, also called an avocado (or avocado pear or alligator pear), is
			botanically a large berry containing a single large seed known as a "pit" or a "stone".</p>
		<img class="image" src="avocado.png">
	</article>
	<article>
		<div class="title tomato">TOMATO</div>
		<p>The tomato is the edible, often red, berry of the nightshade Solanum lycopersicum, commonly known as a tomato plant. The species originated in western South America.The Nahuatl (Aztec language) word tomatl gave rise to the Spanish word tomate, from
			which the English word tomato derived.</p>
		<img class="image" src="tomato.png">
	</article>
	<span class="emptyBlocks">
			<div class="title">EMPTY</div>
		</span>
</div>

@import url('https://fonts.googleapis.com/css?family=Titan+One|Crimson+Text');
article  {
	background-image: linear-gradient(to right, transparent 50px, #fdef67 50px, #fdef67 calc(100% - 50px), transparent 0);
}
.title,.image  {
	position: sticky;
	position: -webkit-sticky;
	z-index: -1;
	width: 50px;
}
.title  {
	left: 20px;
	height: 100%;
	margin-right: 52px;
	/* -x- right margin = .image's width (50px), to stay hidden when scrolled + 2px (for Chrome)*/
	background-color: dodgerblue;
	font: 28.5pt 'Titan One';
	text-indent: 4px;
	text-shadow: 2px 2px 0 #fdef67;
	color: #f83d23;
	writing-mode: vertical-lr;
	text-orientation: upright;
	-webkit-text-orientation: upright;
}
.image  {
	left: 150px;
	height: auto;
	margin-bottom: 5px;
	filter: drop-shadow(2px 2px dodgerblue);
}
p  {
	width: calc(100% - 120px);
	/* -x- width = 100%[article width] - ( 100px[total width of .title and .image] +  20px[for aesthetics]) */
	margin: 20px -50px auto -50px;
	vertical-align: top;
	white-space: initial;
}
.wrapper  {
	width: 90vw; max-width: 420px;
	height: 400px;
	margin: auto;
	overflow-x: scroll;
	white-space: nowrap;
}
.wrapper *  {display: inline-block;}
.emptyBlocks, article  {
	width: 80%;
	height: 78%;
	margin: 10% 10% 10% calc(10% + 25px);
	/* -x- extra 25px on left (half of the width of .image) to be visually centred */
}
.emptyBlocks {background-color: #ccc;}
body  {font-family: 'crimson text';}
h3  {text-align: center;}
@media (max-width: 420px)  { p  {font-size: 11pt;}}
@media (max-width: 375px)  { p  {font-size: 9pt;}}
@supports not ((-webkit-text-orientation: upright) or (text-orientation: upright))  {
	.title  {letter-spacing: 5px;}
}