Applying the display: inline-block; style to an element will cause it to be integrated with surrounding content.
To create a line break in text when using this style, you would typically insert a line-break tag <br>, although the vertical spacing of the line will remain consistent as you previously noted. [Additionally, a horizontal scroll-bar may appear if the panel's width is decreased.]
Overview
The use of the <table></table> element offers numerous advantages in this scenario.
When employing the <table> element (as demonstrated below), the content automatically flows to the next line. As the available horizontal space decreases beyond the width of the <table>, it shifts to a new line and pushes the content downward.
In this case, there is no appearance of a horizontal scroll-bar, since browsers do not render the <table> without any internal elements or specific height or border properties.
(Different browsers might exhibit varied behaviors; Mozilla Firefox does not display the table element with a specific border property, while Google Chrome does.)
Here's the HTML code snippet:
<img src="http://placehold.it/100x50" alt="">
<table></table>
Lorem ipsum dolor sit amet...
And the CSS styling:
img { float: left; }
table { width: 12em; }
Check out the JSBin Demo.
The Solution Approach
For a purely CSS-based solution, I utilized the ::before pseudo-element to simulate the behavior of the <table> HTML element.
See the corresponding HTML markup:
<div>
<img src="http://placehold.it/400x400" alt="">
<p class="content">
<!-- This section contains the main content... -->
</p>
</div>
Along with the necessary CSS rules:
img { float: left; }
.content:before {
content: ' ';
display: table;
width: 10em; /* Adjust the current width size accordingly */
}
View the JSBin demo for reference.