There are two divs with a 50px padding, making them 100px apart. The top div contains an image floated to the right with paragraphs wrapping around it. The requirements team requests a 20px margin below the image if text flows under it, but no margin if there is no text.
<div class="panel">
<img src="https://images.pexels.com/photos/45170/kittens-cat-cat-puppy-rush-45170.jpeg">
<p>some text that may or may not flow under the image</p>
<p>some text that may or may not flow under the image</p>
<p>some text that may or may not flow under the image</p>
</div>
<div class="panel">
<p>text</p>
</div>
.panel {
padding-top: 50px;
padding-bottom: 50px;
border-top:1px solid black;
overflow:hidden;
}
img {
width: 55%;
float: right;
margin-left: 20px;
margin-bottom: 20px;
}
p {
background-color: red;
margin-bottom: 0;
}
For a live demo, visit this link.
When text flows under the image, the space between the text and line is 50px. Without text flowing under the image, the space between the image and line is 70px.