Align image with text

GWER, I've tried to do as close to what you need. I'm putting the CSS code below. On the margin, you can place an image. If this is not possible, I found content about gradient borders in Stack ( in English) that can help you.

.tudo {
    width: 600px;
}
.tudo img {
    float: left;
}
.tudo p {
    padding-left: 140px;
}

<div class="tudo">
   <img src="http://multnix.com/stack/tags.png">
   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor lorem,
    efficitur sed gravida sed, congue id magna. Vestibulum tincidunt eu sapien 
    eu dapibus. Mauris eget laoreet augue, quis sodales dolor.         
   </p>
</div>

@GWER You can try to put the image in one column and the text in another so to speak ... Since the columns would be divs, like this:

<div>
    <div id="col1" style="float:left; height:200px;">
        <img src="<?php echo IMAGEPATH; ?>services/tag.jpg">
    </div>
    <div id="col2" style="float:left">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor lorem, efficitur sed gravida sed, congue id magna. Vestibulum tincidunt eu sapien 
eu dapibus. Mauris eget laoreet augue, quis sodales dolor. 
        </p>
    </div>
</div>

Since in "# col1", you place the necessary height (not exactly the 200px I put) so that the text does not invade the area below the Tags image. Do you understand?

I think this will solve the problem. Test and let me know.

Put a style="float:left" in the image. if you want a bigger spacing between image and text, put a padding in this style (remembering that it should be in a separate css, I made the same tag to be more readable and compact).

<div>
   <img src="<?php echo IMAGEPATH; ?>services/tag.jpg" style="float:left">
   <p style="padding-left:70px"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor lorem,
    efficitur sed gravida sed, congue id magna. Vestibulum tincidunt eu sapien 
    eu dapibus. Mauris eget laoreet augue, quis sodales dolor. 
   </p>
</div>