Make img element inside div2 behave like it is an inline-block in previous div1-CodePudding

The simplified Setup - which is not subject to change because it is maintained and imported from a third-party system: There is a list-element with a variable width depending on screensize. Inside that: I have a div containing heading. After that I have a div containing the description which consists of an image and an text.

<ul>
<li>
<div >Heading</div>
<div >
    <img src="image.png"><br><p>Some generic text</p>
</div>
</li>
</ul>

What I want to do now is having the image in line with the heading, but if the heading takes so much space that the image won't fit anymore (small screen sizes) the image should "break" into a new line.

With giving the image float:right;margin-top:-40px; or float:left;margin-top:-40px;margin-left:longestHeadingTxt 5px I can "pull" the image out of the description. But with float I can not break if the heading almost takes up the whole screen size and the image should be in the next line (also float right looks strange on wide screens if the heading is very short).

I tried a lot of things but I just can't find a solution... Could someone please help me to solve this?

ul {width: 580px;}
li {list-style-type: none; margin-top: 80px;}
.descriptionFakingLook img {float: left; margin-top: -28px; margin-left: 130px;}
.descriptionRight img {float: right; margin-top: -28px;}
.descriptionLeft img {float: left; margin-top: -28px; margin-left: 200px;}

<ul>
<li>
<div >How it looks now</div>
<div ><img src="https://cdn4.iconfinder.com/data/icons/basic-user-interface-elements/700/home-house-homepage-building-32.png"><br><p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
</li>
<li>
<div >How it should look</div>
<div ><img src="https://cdn4.iconfinder.com/data/icons/basic-user-interface-elements/700/home-house-homepage-building-32.png"><br><p>This is how it should look no matter how long the heading is. But if heading and image don't fit into one line the image should just be under the heading like how it looks now.</p>
</li>
<li>
<li>
<div >shortH</div>
<div ><img src="https://cdn4.iconfinder.com/data/icons/basic-user-interface-elements/700/home-house-homepage-building-32.png"><br><p>Short heading looks akwaard if the image floats right, but also there would be no line break as in the example below.</p>
</li>
<li>
<div >long heading which is long in the example but could happen with a sreen 320px wide</div>
<div ><img src="https://cdn4.iconfinder.com/data/icons/basic-user-interface-elements/700/home-house-homepage-building-32.png"><br><p>this floats left but has a lot of problems of course. </p>
</li>

CodePudding user response：

You can try like below:

.heading {
  float: left;
  margin-top: 10px;
  clear: left;
  font-weight: bold;
}

.description img {
  float: left;
  margin-left: 10px;
}

.description img ~ p {
  clear: left;
}

<div >How it looks now</div>
<div ><img src="https://cdn4.iconfinder.com/data/icons/basic-user-interface-elements/700/home-house-homepage-building-32.png"><br>
  <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by
    their place and supplies it with the necessary regelialia.</p>
</div>

<div >A very very loooong heading, yes too long</div>
<div ><img src="https://cdn4.iconfinder.com/data/icons/basic-user-interface-elements/700/home-house-homepage-building-32.png"><br>
  <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by
    their place and supplies it with the necessary regelialia.</p>
</div>

<div >A very very loooong heading, yes too long A very very loooong heading, yes too long A very very loooong heading, yes too long A very very loooong heading, yes too long</div>
<div ><img src="https://cdn4.iconfinder.com/data/icons/basic-user-interface-elements/700/home-house-homepage-building-32.png"><br>
  <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by
    their place and supplies it with the necessary regelialia.</p>
</div>