for Davey

HTML

<body>
  <h1>Totem pole</h1>

  <p>Totem poles are monumental sculptures carved on poles, posts, or pillars with symbols or figures made from large trees, mostly western red cedar, ...( more at
    <a href="https://en.wikipedia.org/wiki/Totem_pole">Wiki</a> )
  </p>

  <div>
    <span>
			<img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Totem_Pole_-_Pioneer_Square_-_1907.jpg/228px-Totem_Pole_-_Pioneer_Square_-_1907.jpg">
		</span>
    <span>Etiam eu ullamcorper mauris. 
			Duis eleifend at diam non pulvinar.
		</span>
  </div>

  <div>
    <span>
			<img alt="" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Tallest_totem_pole.jpg/223px-Tallest_totem_pole.jpg">
		</span>
    <span>Suspendisse pulvinar faucibus sem. 
			Nunc tincidunt a ante eget tristique. 
			Sed sollicitudin interdum turpis, ut molestie velit laoreet non. 
			Ut turpis nibh, porttitor ac sodales nec, fringilla a justo. 
			In feugiat semper nulla, a accumsan velit viverra eu. 
			Interdum et malesuada fames ac ante ipsum primis in faucibus. 
			Sed ullamcorper est quis vehicula aliquam. 
			Vivamus suscipit risus nec mauris egestas fermentum.
		</span>
  </div>
</body>

CSS

div {
		margin-top: 1em;
		border: 2px solid black;
	}

	div:after {
		content: '';
		display: block;
		clear: left;
	}

	div span {
		display: block;
		padding: 1em;
	}

	div span:first-child {
		display: inline-block;
		max-height: 20em;
		overflow: auto;
		padding: 0;
	}

	div img {
		display: block;
		max-width: 100%;
		height: auto;
		border: 0;
	}

@media screen and (min-width: 30em){
	div span:first-child {
		float: left;
		margin-right: 1em;
	}	
}