Align Image To Right Of Paragraph Css

I'd like to align an image to the right of a paragraph, and I'd like to be able to do so without having to set a fixed width on the paragraph along with some padding away from the

Solution 1:

Place <img> inside <p>.

<p>
<img src="https://media.tenor.co/images/fe795771396053d4e1d55904dcf20298/tenor.gif" />
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
</p>

https://jsfiddle.net/uvew5yw2/

Solution 2:

Replace display: inline-block; in both of the elements with display: block; or remove it completely. if it doesn't work you can add width:x px to the elements.

Solution 3:

Specify the paragraph width. Like width: 55%;

Solution 4:

Change order of p and img. And remove inline-block property from p element.

* {
  box-sizing: border-box;
}

p {
  border: solid 1px #000;
}

img {
  float: right;
  display: inline-block;
}

<img src="https://media.tenor.co/images/fe795771396053d4e1d55904dcf20298/tenor.gif" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>

Solution 5:

Move the IMG above the P tag and then remove float and display from the P tag.

p {
  border: solid 1px #000;
  width: auto;
}

Here is updated jsfiddle: https://jsfiddle.net/mnakoajk/5/

and then put margin left and margin bottom on the IMG tag to keep paragraph text at a safe distance.

Updated jsfiddle: https://jsfiddle.net/mnakoajk/6