JSFiddle - React, Tailwind, and code Playground

HTML

<div class="code" style="counter-reset: codesection 15">
	<div class="line">$criteria = $this->getDbCriteria();</div>
	<div class="line">$criteria->compare('dea_prop', $instruction->dea_prop);</div>
	<div class="line">$criteria->compare('dea_id', '<>' . $instruction->dea_id);</div>
	<div class="line">$criteria->compare('dea_status', array(</div>
	<div class="line"> self::STATUS_AVAILABLE,</div>
	<div class="line"> self::STATUS_UNDER_OFFER,</div>
	<div class="line"> self::STATUS_UNDER_OFFER_WITH_OTHER</div>
	<div class="line"> self::STATUS_PRODUCTION,</div>
	<div class="line"> self::STATUS_PROOFING,</div>
	<div class="line"> self::STATUS_INSTRUCTED</div>
	<div class="line">));</div>
</div>

<br />
<br />

<div class="code" style="counter-reset: codesection 10">
	<div class="line">$criteria = $this->getDbCriteria();</div>
	<div class="line">$criteria->compare('dea_prop', $instruction->dea_prop);</div>
	<div class="line">$criteria->compare('dea_id', '<>' . $instruction->dea_id);</div>
	<div class="line">$criteria->compare('dea_status', array(</div>
	<div class="line" data-line-symbol="#"> self::STATUS_AVAILABLE,</div>
	<div class="line-no-increment" data-line-symbol="$"> self::STATUS_UNDER_OFFER,</div>
	<div class="line"> self::STATUS_UNDER_OFFER_WITH_OTHER <br /> Wrapping text here</div>
	<div class="line"> self::STATUS_PRODUCTION,</div>
	<div class="line"> self::STATUS_PROOFING,</div>
	<div class="line"> self::STATUS_INSTRUCTED</div>
	<div class="line">));</div>
</div>

CSS

.code {
			counter-reset : codesection;
            font-family: Monospace;
		}

		.code .line, .code .line-no-increment {
			padding-left : 60px;
			position     : relative;
		}

		.code .line:before {
			position          : absolute;
			left              : 0;
			width             : 50px;
			text-align        : right;
			counter-increment : codesection;
			content           : counter(codesection) ". ";
			height            : 100%;
			background        : #c7e5ff;
			border-right      : 1px solid #819dff;
		}

		.code .line[data-line-symbol]:before {
			content : attr(data-line-symbol) ". ";
		}

		.code .line-no-increment[data-line-symbol]:before {
			position          : absolute;
			left              : 0;
			width             : 50px;
			text-align        : right;
			content           : attr(data-line-symbol) ". ";
			height            : 100%;
			counter-increment : none !important;
			background        : #c7e5ff;
			border-right      : 1px solid #819dff;
		}