JSFiddle - React, Tailwind, and code Playground
HTML
<div class="relative-container">
<div class="content1">
<p>Lorem ipsum dolor sit amet</p>
<img alt="" src="http://placehold.it/64x64" />
<p>Lorem ipsum dolor sit amet, etiam iaculis, amet lacinia ultricies voluptatem, wisi mauris, ea quisque est nullam amet, vel libero. Eget pretium quis sed. Ad mattis, dolore ut non molestie et, quis pulvinar, orci luctus placerat lobortis donec scelerisque, nulla lorem. A luctus sed gravida, nullam ante dictum ipsum purus, inceptos <strong>the right image is supposed to come under this paragraph, just a little</strong>.</p>
<img alt="" src="http://placehold.it/64x64" />
</div>
<div class="content-outofport">
<img alt="" src="http://placehold.it/128x64/f00000/000/&text=out%20of%20port" />
</div>
<div class="content2">
<img alt="" src="http://placehold.it/64x64" />
<p><strong>This paragraph won't be affected by imge position</strong>Lorem ipsum dolor sit amet, etiam iaculis, amet lacinia ultricies voluptatem, wisi mauris, ea quisque est nullam amet, vel libero. Eget pretium quis sed. Ad mattis, dolore ut non molestie et, quis pulvinar, orci luctus placerat lobortis donec scelerisque, nulla lorem. A luctus sed gravida, nullam ante dictum ipsum purus, inceptos mauris porta semper, habitant at mi vulputate. Eget parturient. Suspendisse donec ante est nullam magna, nisl leo vitae vitae. Sequi nec lacinia dui magna, accumsan justo augue, sed nunc penatibus commodo. Porttitor vestibulum nibh, donec at nunc eros vitae mollis.</p>
<img alt="" src="http://placehold.it/64x64" />
</div>
</div>
CSS
.relative-container {
position:relative;
overflow: hidden;
}
.content1 {
border:2px solid #fee;
z-indez:1
}
.content2 {
border:2px solid #eef;
}
.content-outofport {
background-color:#fcc;
border:2px solid #efe;
height:64px;
position:relative;
right:0;
z-indez:0;
overflow:visible;
margin-right:111px;
right:0;
width:100%;
}
.content-outofport img {
position:absolute;
left: 400px;
top:-111px;
}