image overlapping with text

Hello I am new to coding. My image is overlapping with the text in the about us section. in the tutorial I’m watching the text is next to the image. It does not overlap with it. Any help?

* {
  font-family: "Poppins ", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
  padding: 100px;
}

.row {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.row .co150 {
  position: relative;
  width: 48%;
}

<section class="about " id="about ">
  <div class="row ">
    <div class="co150 ">
      <h2 class="titleText "><span>A</span>bout Us</h2>
      <p>udgugqguugdugwugugugduqugdg qwuuuuuuuuuuu uuuuuuuuuuuuuuuuuuuuu aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa zzzzzzzzzzzzz zzzzzzzzzzzzzzzzzzzz zzzzzzzzzzzzzzzzzzzz zzzzzzzzzzz mmmmmmmmmmmmmmmmmmmmm mmmmmmmmmmmmmmmmmmm mmmmmmmmmmmmmmmmmmmmmmmm
        jjjjjjjjjjjjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjj jjjjjjjjjjjjjjjjjjjj hhhhhhhhhhh hhhhhhhhhhhhhhhhhhhhhhhhhhhh hhhhhhhhhhhhhhhhhhhh.
        <br><br>lorem ipsum dolores umbridge x her husband blalalalallllllllllllllllllllllll .
      </p>
    </div>
    <div class="co150 ">
      <div class="imgBx ">
        <img src="img1.jpg ">
      </div>
    </div>
  </div>
</section>

How do I fix this problem?

Answer

By inline-block your objects will be side-by-side and giving both objects width of 100% so they will take their respective parent’s width. Finally, in the case of text, I gave overflow-wrap: break-word so the text will not collapse with the image

* {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
  padding: 100px;
}

.row .co150 {
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 48%;
}
 .co150 p {
   width: 100%;
   overflow-wrap: break-word;
   
   
 }
.imgBx {
  width: 100%;
}
.imgBx img {
 width: 100%;
 object-fit: contain;
}

<section class="about" id="about">
  <div class="row">
    <div class="co150">
      <h2 class="titleText"><span>A</span>bout Us</h2>
      <p>udgugqguugdugwugugugduqugdgqwuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
        jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh.
        <br><br>lorem ipsum dolores umbridge x her husband blalalalallllllllllllllllllllllll .
      </p>
    </div>
    <div class="co150">
      <div class="imgBx">
        <img src="https://i.picsum.photos/id/425/536/354.jpg?hmac=wBNHXWWIrsjZJiC-motCXU36RWkqnUAAPfVJulwHGHM">
      </div>
    </div>
  </div>
</section>

Working FIDDLE