Maintain Paragraph Indentation even after Image Ends-CodePudding

I am a beginner in HTML/CSS. I am trying to write a paragraph on side of image. But when paragraph reaches end of container it goes to next line but does not respect the indentation.

What I want to achieve is:

IMG Paragraph Text Paragraph Text
    Paragraph Text Paragraph Text
    Paragraph Text Paragraph Text

What Happens now:

IMG Paragraph Text Paragraph Text
Paragraph Text Paragraph Text
Paragraph Text Paragraph Text

Please refer to image below:

Any Help would be appreciated

CodePudding user response：

Let's say we are taking a container to make them side by side. In markup there are few ways to do such thing. Let's take a container div.

<div class='container'>
</div>

inside of this container we are gonna have our image and paragraph.

<div class='container'>
    <div>
      <img src='' alt='img'/>
    </div>

    <div>
      <p>Your paragraph here</p>
    </div>
</div>

to have them side by side let's add some css:

<style>
  .container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
</style>

Explaination :

When we used display:grid; it will be in side by side and take same width as other one takes. And grid-template-columns will make them aligned. Hope you understand