I am faced with the challenge of aligning a 100x100 vertically-centered image to the left of a text block that extends beyond its height. It is important that the text does not wrap underneath the image but stays in a single block on the right side. I must achieve this using inline styles due to constraints in the CMS. Additionally, there should be a small margin between the image and the text block.
Although I have attempted the following code, the text ends up behind the image and I suspect that the vertical centering is not accurate:
<div style="position: relative;"><img style="margin: 0; position: absolute; top: 10%;" src="http://placehold.it/100x100" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor velit nec fringilla imperdiet. Sed at ornare urna. Nullam libero ante, vulputate sit amet semper vitae, efficitur ac velit. Donec egestas nibh eu tortor imperdiet, eget feugiat ligula porttitor. Ut orci nulla, sollicitudin sit amet elit pretium, consequat ultricies tellus. Proin nec magna id elit egestas malesuada a non tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque nunc risus, facilisis eget viverra quis, imperdiet ut nisl. </p>
</div>