HTML/CSS: Text wrap around image within box?

Question

I'm helping my best friend build a programmer portfolio website. He's working three jobs and just doesn't have the time. I've done almost everything, but I have run into just a couple problems (they'll be separate questions as I fix things).

First problem: I can't seem to get the text within my box to wrap around the image in my box.

CSS:

        .main .project {
            width: 95%;
            border: 3px #318698;
            outline-color: #318698;
            outline-style: solid;
            display: inline-block;
            padding: 0px 20px 20px 20px;
        }

        .main .project img {
            width: 20%;
            display: inline-block;
            padding: 20px 0px 20px 0px;
        }

HTML:

<div class="main">
        <h1>Projects</h1>
        <div class="project">
            <img src="icon.png" align="top"></img>
            <h2>Project Name</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p2>Date of Project | Relevant Code Aspects (JAVA, Python, SQL)</p2>
        </div>

If you want to see the full page, I have a CodePen set up with it.

Answer 1

This is what CSS float is still for (flex has taken up some of its previous uses) - wrappng text around an image.

At its simplest here is the code from your question with a float left - alter the viewport width to see the effect. Obviously you will want to play around with margins, minimum sizes and so on to get exactly the effect you want.

<style>.main .project {
  width: 95%;
  border: 3px #318698;
  outline-color: #318698;
  outline-style: solid;
  display: inline-block;
  padding: 0px 20px 20px 20px;
}

.main .project img {
  width: 20%;
  display: inline-block;
  float: left;
  padding: 20px 0px 20px 0px;
}

<div class="main">
  <h1>Projects</h1>
  <div class="project">
    <img src="https://picsum.photos/id/1015/200/300" align="top"></img>
    <h2>Project Name</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p2>Date of Project | Relevant Code Aspects (JAVA, Python, SQL)</p2>
  </div>
</div>

Answer 2

Answer came from j08691 !

I just needed to float the image to the left. Completely forgot about floating.

            .main .project img {
            width: 10%;
            display: inline-block;
            float: left; 
            padding: 20px 20px 20px 0px;
        }