JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<ol>
		<li>
			<div class="input"></div>
			<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ea, obcaecati tempore omnis voluptatum cum blanditiis expeditaporro soluta praesentium.</div>
		</li>

		<li>
			<div class="input"></div>
			<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ea, obcaecati tempore omnis voluptatum cum blanditiis expeditaporro soluta praesentium.</div>
		</li>

		<li>
			<div class="input"></div>
			<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ea, obcaecati tempore omnis voluptatum cum blanditiis expeditaporro soluta praesentium.</div>
		</li>
	</ol>
</body>

CSS

.input { display: inline-block; background: #999; width: 15px; height: 15px; border-radius: 2px; margin-right: 10px; float: left; }
.text { display: block; overflow: hidden; }
ol { list-style: none; counter-reset: ol 8; display: table; }
li { display: table-row; }
li::before { content: counter(ol) '.'; counter-increment: ol; display: table-cell; padding-right: 5px; text-align: right; }