Combinatie van float en padding in CSS

Laten we de afbeelding weer boven de alinea's plaatsen, maar ze wel een linker padding laten. In dit geval zal de padding alleen de tekst wegduwen die links tegen de ouder-div aanligt, en niet tegen onze afbeelding:

<div>
	<img src="img.png" alt="">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
p {
	margin-left: 30px;
	padding-left: 30px;
	border: 1px solid green;
}
img {
	float: left;
	opacity: 0.5;
}

Laten we nu de afbeelding in de eerste alinea plaatsen - deze zal naar rechts bewegen samen met de tekst van de alinea's:

<div>
	<p>
		<img src="img.png" alt="">
		Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
	</p>
	<p>
		some long text
	</p>
</div>

div {
	width: 400px;
	border: 1px solid red;
	text-align: justify;
}
p {
	margin-left: 30px;
	padding-left: 30px;
	border: 1px solid green;
}
img {
	float: left;
	opacity: 0.5;
}