html - Set image to same line with text that doesn't have default line height

Question

If my text doesn't have default line-height value and I have images that are floated either left or right it looks like the image doesn't start from the same line as the text. Is there anything I can do about it? I know I could add some top-margin for the image but it is manual work. I have hundreds of images and text chapters and this problem is everywhere. My problem is demonstrated here: https://codepen.io/shnigi/pen/VwKmYPb It looks like the image starts way above the text.

body {
  max-width: 900px;
  margin: auto;
}

p {
  line-height: 4em;
}

img {
  float: left;
  margin-right: 20px;
}

<p><img src="https://via.placeholder.com/350">Messages are used for personal, family, business and social purposes. Governmental and non-governmental organizations use text messaging for communication between colleagues. In the 2010s, the sending of short
  informal messages became an accepted part of many cultures, as happened earlier with emailing.[1] This makes texting a quick and easy way to communicate with friends, family and colleagues, including in contexts.</p>

Answer 1

One approximation is to reset the line-height of the first line but this will make the gap with the next line smaller than the others:

body {
  max-width: 900px;
  margin: auto;
}

p {
  line-height: 4em;
}

p::first-line {
  line-height: initial;
}

img {
  float: left;
  margin-right: 20px;
}

<p><img src="https://via.placeholder.com/350">Messages are used for personal, family, business and social purposes. Governmental and non-governmental organizations use text messaging for communication between colleagues. In the 2010s, the sending of short
  informal messages became an accepted part of many cultures, as happened earlier with emailing.[1] This makes texting a quick and easy way to communicate with friends, family and colleagues, including in contexts.</p>