How to place an image beside text? HTML/CSS

Question

I have a paragraph that I have formated the right margin to leave room for an image beside. How would I place the image there? Because I have the right margin set it is not allowing me to place the image directly beside it? Is there a tag I can use? I have attached an image below.

This is a picture of the paragraph.

This is my code

Answer 1

You can use CSS property display: inline-block and create 2 different div for image and paragraph. Set width of div according to your need as in example I used 30% and 70% for image and paragraph respectively.

    <style>
        div{
            display: inline-block;
        }
        .image{
            width: 30%;
        }
        .paragraph{
            width: 70%;
        }
    </style>
    <div>
        <div class="image">
           <img src="image.jpg" width="100%">
        </div>
        <div class="paragraph">
            your paragraph goes here.
        </div>
    </div>

You can also use bootstrap grid basic to do this. Bootstrap has provided predefined classes for this work.