Special indent text next to image

Question

I would like to generate a certain style in which there is an image (icon) on the left side, and next to it there is some description (plain text).

So here is what I got so far:

.elem { margin-left: 7%; position: relative; width: 100%; } .text { display: inline; vertical-align:middle; } .img { width: 5%; vertical-align:middle; } 

 <div class="elem"> <img class="img" src="https://d30y9cdsu7xlg0.cloudfront.net/png/172871-200.png"/> <span class="text"> (1) This is a example text </span> </div> <br> <div class="elem"> <img class="img" src="https://d30y9cdsu7xlg0.cloudfront.net/png/172871-200.png"/> <span class="text"> (2) <b>This is a LONG example text, because this is a LONG example text while it a LONG example text also this is a LONG example text, also because this is a LONG example text while all is a LONG example text</b> </span> </div> <br> <div class="elem"> <img class="img" src="https://d30y9cdsu7xlg0.cloudfront.net/png/172871-200.png"/> <span class="text"> (3) This is a example text </span> </div> 

As you can see, it works fine, but second elem (div) with long text generates a line break, which causes my text to float to the left. But I want the lines to be indented, like the first word in a sentence. Look at this:

Answer 1

You can try bending like this:

 .elem { margin-left: 7%; display:flex; align-items:flex-start; padding-top:5px; margin-bottom:10px; } .img { width: 30px; margin-top:-5px; } 

 <div class="elem"> <img class="img" src="https://d30y9cdsu7xlg0.cloudfront.net/png/172871-200.png" > (1) <span class="text"> This is a example text </span> </div> <div class="elem"> <img class="img" src="https://d30y9cdsu7xlg0.cloudfront.net/png/172871-200.png" > (2) <span class="text"> <b>This is a LONG example text, because this is a LONG example text while it a LONG example text also this is a LONG example text, also because this is a LONG example text while all is a LONG example text</b> </span> </div> <div class="elem"> <img class="img" src="https://d30y9cdsu7xlg0.cloudfront.net/png/172871-200.png" > (3) <span class="text"> This is a example text </span> </div> 

Answer 2

You can do much easier markup with this.

 li { list-style: none; display: flex; margin-bottom: 10px; } li>span { margin-right: 5px; } li:before { content: ''; display: block; height: 32px; width: 32px; min-width: 32px; margin-right: 10px; background-image: url(https://d30y9cdsu7xlg0.cloudfront.net/png/172871-200.png); -webkit-background-size: cover; background-size: cover; background-repeat: no-repeat; } 

 <ul> <li><span>(1)</span> This is a example text</li> <li><span>(2)</span> This is a LONG example text, because this is a LONG example text while it a LONG example text also this is a LONG example text, also because this is a LONG example text while all is a LONG example text</li> <li><span>(3)</span> This is a example text</li> </ul> 

It’s simple if you need the same icon for this, but if you need a different icon for some line, you can target this line with li:nth-child(n) or assign it some class and just specify background-image: url()

And if you want to align the icon in the center of the first line, you can do this little trick:

 li { list-style: none; display: flex; padding-top: 5px; margin-bottom: 5px; } li>span { margin-right: 5px; } li:before { margin-top: -5px; content: ''; display: block; height: 32px; width: 32px; min-width: 32px; margin-right: 10px; background-image: url(https://d30y9cdsu7xlg0.cloudfront.net/png/172871-200.png); -webkit-background-size: cover; background-size: cover; background-repeat: no-repeat; } 

 <ul> <li><span>(1)</span> This is a example text</li> <li><span>(2)</span> This is a LONG example text, because this is a LONG example text while it a LONG example text also this is a LONG example text, also because this is a LONG example text while all is a LONG example text</li> <li><span>(3)</span> This is a example text</li> </ul>