JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<p>This is a very long paragraph. Let's see how this would render...</p>
<p>some text here</p>
<p>some text here</p>
<p>This is a very long paragraph. Let's see how this would render...</p>
<p>some text here</p>
<div>
<img src="img.gif" alt="My Image" />
</div>
<p>This is a very long paragraph. Let's see how this would render...</p>
<p>some text here</p>
<p>some text here</p>
<div>
<img src="img.gif" alt="My Image" />
</div>
<p>This is a very long paragraph. Let's see how this would render...</p>
<p>some text here</p>
</div>
CSS
/* Assume image size is 100px by 100px. */
img {
position: absolute;
right: 0;
display: block;
width: 100px;
height: 100px;
background-color: #000;
}
p {
margin-right: 110px; /* Set aside 10px of space for a long text. */
}