JSFiddle - React, Tailwind, and code Playground

HTML

<section>
<ol>
	<li><a href="#"><div></div><p>The birch canoe slid on the smooth planks.</p></a></li>
	<li><a href="#"><div></div><p>Glue the sheet to the dark blue background.</p></a></li>
	<li><a href="#"><div></div><p>It's easy to tell the depth of a well.</p></a></li>
	<li><a href="#"><div></div><p>These days a chicken leg is a rare dish.</p></a></li>
	<li><a href="#"><div></div><p>Rice is often served in round bowls.</p></a></li>
</ol>
</section>

CSS

*
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-decoration: none;
}

section
{
	display: inline-block;
}

ol
{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	
	background-color: gray;
}

li
{
	flex-basis: auto;
	flex-grow: 0;
	flex-shrink: 0;
	
	background-color: greenyellow;
}

a
{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}

div /* Icon Placeholder */
{
	flex-basis: 40px;
	flex-grow: 0;
	flex-shrink: 0;

	width: 40px;
	height: 40px;
	
	background-color: red;
}

p
{
	flex-basis: 0;
	flex-grow: 1;
	flex-shrink: 0;
}