Can't wrap text around image and one more

[sabresong]

I'm having trouble with layout for one section of a page I'm working on. There are two issues that I'm pretty sure are very closely related. This is a custom page that will also be converted to a Wordpress theme when it's finished.

The first issue is that I can't seem to get the text to wrap around the image at the start of the div. It almost works when I set flex-direction: row on the container, but then each paragraph of the text shows as an individual column.

The second issue is that I can't get the second block of text (.about-phoenix) to show to the right of the first block (.about-amber) without setting the container to flex-direction: row.

Here's the relevant CSS:
/* About Us settings */
.about {
display: flex;
flex-direction: row;
align-items: flex-start; /* Align items at the top */
padding: 10px;
margin: 10px;
border-radius: 10px;
min-height: 100vh;
}

.about-text-row {
display: flex;
flex-direction: row;
gap: 30px;
width: 100%;
}

.about-image {
width: 150px;
height: 150px;
border: 1px ridge indigo;
border-radius: 50%;
margin-right: 20px;
flex-shrink: 0;
}

.about-amber {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 48%;
padding: 20px;
margin: 10px 0;
box-sizing: border-box;
}

.about-amber-text {
flex: 1 1 0;
}

.about-phoenix {
width: 48%;
padding: 20px;
margin: 10px 0;
box-sizing: border-box;
}

.about h3 {
font-weight: 300;
color: indigo;
margin-bottom: 20px;
}


Here's the relevant HTML:
<section id="about" class="about section">
<div class="about-content">
<div class="about-amber">
<img class="about-image" src="http://localhost/plmassage/wp-content/uploads/2025/06/amber-75x75-1.jpg" alt="A photo of Kristle Amber Riddle" class="alignleft about-image">
<h3>A message from Amber:</h3>
<p>First of all, I deeply appreciate this opportunity to introduce myself to you! </p>
<p>Although I was drawn to massage and energy work as a child and have studied it since the ‘90s, I felt teaching was the right profession at the time. I attended WCU as a North Carolina Teaching Fellow, where I majored in literature and education. For the following 25 years, I taught English in public schools in WNC, which included teaching print and broadcast journalism in the same high school where I graduated.</p>
<p>After retiring from teaching, I studied clinical massage and got my NCLMBT license in 2019. I have had considerable experience and training in various modalities including hot and cold stones, manual and machine cupping, oncology massage, Breema, Access Bars, and energy work. I am eager to continue learning, and I look forward to meeting you all and addressing your needs on the massage table and in my portable chair!</p>
<p>My passions include bodywork, education. reading, writing, and editing. In my free time, I love to play games with my nephew, hang out with my family and friends, and practice playing the guitar. I seek to learn something new and positive every day, which includes relearning some of what I've forgotten if it's important. I also like snuggling with my cats if they will allow It, lol.</p>
</p>
<p>NCLMBT #18576</p>
</div>
<div class="about-phoenix">
<p>The phoenix is a mythical bird that symbolizes renewal and rebirth. In many cultures, it is believed that the phoenix rises from its own ashes, representing the idea of transformation and new beginnings.</p>
<p>It appears in various mythologies, including Greek, Egyptian, and Chinese, often associated with the sun and immortality. The phoenix is a powerful symbol of resilience, strength, and the ability to overcome challenges.</p>
<p>In the context of massage therapy, the phoenix can represent the healing and transformative power of touch. Just as the phoenix rises from the ashes, a massage can help individuals rise above stress, tension, and pain, leaving them feeling rejuvenated and renewed.</p>
<p>At Phoenix Landing Massage, we embody this spirit of renewal and transformation. Our goal is to provide a healing experience that allows you to let go of the burdens of daily life and emerge feeling refreshed and revitalized.</p>
<p>Whether you are seeking relaxation, relief from pain, or a moment of tranquility, our massage services are designed to help you rise above and embrace a new sense of well-being.
<p>The phoenix is a symbol of renewal and rebirth, which is what I hope to bring to my clients through massage therapy. Just as the phoenix rises from the ashes, I aim to help you rise above stress and tension, leaving you feeling rejuvenated and ready to take on the world.</p>
</div>
</div>
</section>

 

[VBService]

First of all, your HTML code looks quite good overall, but it contains a few technical and semantic errors that may affect its correct functioning.

• Duplicate class attribute in <img> tag
  This is incorrect – the class attribute should only appear once per element.
  

  <img class="about-image" ... class="alignleft about-image">

  Fix:
  

  <img class="alignleft about-image"
       src="..."
       alt="A photo of Kristle Amber Riddle">

• Unnecessary closing </p> tag
  The second </p> is invalid and breaks the document structure.
  

  <p>... cats if they will allow It, lol.</p>
  </p>

• Missing </p> tag (nested <p> inside another <p>)
  The second <p> is nested inside the first without closing it, which is not allowed in HTML.
  

  <p>Whether you are seeking relaxation ... rise above and embrace a new sense of well-being.
  <p>The phoenix is a symbol of renewal ...</p></div>

  Fix:
  

  <p>Whether you are seeking relaxation ... rise above and embrace a new sense of well-being.</p>
  <p>The phoenix is a symbol of renewal ...</p></div>

• Using a localhost URL in the src attribute
  

  src="http://localhost/plmassage/.../amber-75x75-1.jpg"

  Fix:
  

  src="/wp-content/uploads/2025/06/amber-75x75-1.jpg"

• Missing heading in the <div class="about-phoenix"> section
  To improve structure and accessibility, it’s a good idea to include a heading for this section:
  

  <h3>What the Phoenix Symbolizes</h3>

• 
  Consider using semantic tags like <article> instead of just <div>
  For better semantic meaning and clarity, you could wrap each content block like this:
  

  <article class="about-amber">...</article>
  <article class="about-phoenix">...</article>

<section id="about" class="about section">
  <div class="about-content">

    <article class="about-amber">
      <img class="alignleft about-image"
           src="/wp-content/uploads/2025/06/amber-75x75-1.jpg"
           alt="A photo of Kristle Amber Riddle">
      <h3>A message from Amber:</h3>
      <p>First of all, I deeply appreciate this opportunity to introduce myself to you!</p>
      <p>Although I was drawn to massage and energy work as a child and have studied it since the ‘90s, I felt teaching was the right profession at the time. I attended WCU as a North Carolina Teaching Fellow, where I majored in literature and education. For the following 25 years, I taught English in public schools in WNC, which included teaching print and broadcast journalism in the same high school where I graduated.</p>
      <p>After retiring from teaching, I studied clinical massage and got my NCLMBT license in 2019. I have had considerable experience and training in various modalities including hot and cold stones, manual and machine cupping, oncology massage, Breema, Access Bars, and energy work. I am eager to continue learning, and I look forward to meeting you all and addressing your needs on the massage table and in my portable chair!</p>
      <p>My passions include bodywork, education, reading, writing, and editing. In my free time, I love to play games with my nephew, hang out with my family and friends, and practice playing the guitar. I seek to learn something new and positive every day, which includes relearning some of what I've forgotten if it's important. I also like snuggling with my cats if they will allow it, lol.</p>
      <p>NCLMBT #18576</p>
    </article>

    <article class="about-phoenix">
      <h3>What the Phoenix Symbolizes</h3>
      <p>The phoenix is a mythical bird that symbolizes renewal and rebirth. In many cultures, it is believed that the phoenix rises from its own ashes, representing the idea of transformation and new beginnings.</p>
      <p>It appears in various mythologies, including Greek, Egyptian, and Chinese, often associated with the sun and immortality. The phoenix is a powerful symbol of resilience, strength, and the ability to overcome challenges.</p>
      <p>In the context of massage therapy, the phoenix can represent the healing and transformative power of touch. Just as the phoenix rises from the ashes, a massage can help individuals rise above stress, tension, and pain, leaving them feeling rejuvenated and renewed.</p>
      <p>At Phoenix Landing Massage, we embody this spirit of renewal and transformation. Our goal is to provide a healing experience that allows you to let go of the burdens of daily life and emerge feeling refreshed and revitalized.</p>
      <p>Whether you are seeking relaxation, relief from pain, or a moment of tranquility, our massage services are designed to help you rise above and embrace a new sense of well-being.</p>
      <p>The phoenix is a symbol of renewal and rebirth, which is what I hope to bring to my clients through massage therapy. Just as the phoenix rises from the ashes, I aim to help you rise above stress and tension, leaving you feeling rejuvenated and ready to take on the world.</p>
    </article>

  </div>
</section>

You're using display: flex on .about-amber, which makes all child elements become flex items, so the image and paragraphs are treated like blocks, not inline content, and text can't wrap around the image.

Please check this out, for example, this layout change:

<style>
  body {
    font: 300 1rem/1.6 Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #f9f9f9;
    color: #333;
  }

  section.about {
    padding: 2.5rem; /* 40px */
    min-height: 100vh;
  }

  .about-content {
    display: flex;
    flex-direction: row;
    gap: 1.85rem; /* 30px */
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .about-amber,
  .about-phoenix {
    width: 48%;
    box-sizing: border-box;
    padding: 1.25rem; /* 20px */
    background: #fff;
    border-radius: 0.6rem; /* 10px */
    box-shadow: 0 0.15rem 0.35rem rgba(0, 0, 0, 0.1); /* 2px 6px */
  }

  .about-image {
    width: 150px;
    height: 150px;
    border: 1px ridge indigo;
    border-radius: 50%;
    float: left;
    margin-right: 1.25rem;  /* 20px */
    margin-bottom: 0.6rem; /* 10px */
  }

  h3 {
    font-weight: 300;
    color: indigo;
    margin-top: 0;
  }

  p {
    margin-bottom: 0.95rem; /* 15px */
  }

  @media (max-width: 900px) {
    .about-amber,
    .about-phoenix {
      width: 100%;
    }

    .about-image {
      float: none;
      display: block;
      margin: 0 auto 1.25rem; /* 20px */
    }
  }
</style>

<section id="about" class="about section">
  <div class="about-content">

    <article class="about-amber">
      <img class="about-image"
           src="/wp-content/uploads/2025/06/amber-75x75-1.jpg"
           alt="A photo of Kristle Amber Riddle">
      <h3>A message from Amber:</h3>
      <p>First of all, I deeply appreciate this opportunity to introduce myself to you!</p>
      <p>Although I was drawn to massage and energy work as a child and have studied it since the ‘90s, I felt teaching was the right profession at the time. I attended WCU as a North Carolina Teaching Fellow, where I majored in literature and education. For the following 25 years, I taught English in public schools in WNC, which included teaching print and broadcast journalism in the same high school where I graduated.</p>
      <p>After retiring from teaching, I studied clinical massage and got my NCLMBT license in 2019. I have had considerable experience and training in various modalities including hot and cold stones, manual and machine cupping, oncology massage, Breema, Access Bars, and energy work. I am eager to continue learning, and I look forward to meeting you all and addressing your needs on the massage table and in my portable chair!</p>
      <p>My passions include bodywork, education, reading, writing, and editing. In my free time, I love to play games with my nephew, hang out with my family and friends, and practice playing the guitar. I seek to learn something new and positive every day, which includes relearning some of what I've forgotten if it's important. I also like snuggling with my cats if they will allow it, lol.</p>
      <p>NCLMBT #18576</p>
    </article>

    <article class="about-phoenix">
      <h3>What the Phoenix Symbolizes</h3>
      <p>The phoenix is a mythical bird that symbolizes renewal and rebirth. In many cultures, it is believed that the phoenix rises from its own ashes, representing the idea of transformation and new beginnings.</p>
      <p>It appears in various mythologies, including Greek, Egyptian, and Chinese, often associated with the sun and immortality. The phoenix is a powerful symbol of resilience, strength, and the ability to overcome challenges.</p>
      <p>In the context of massage therapy, the phoenix can represent the healing and transformative power of touch. Just as the phoenix rises from the ashes, a massage can help individuals rise above stress, tension, and pain, leaving them feeling rejuvenated and renewed.</p>
      <p>At Phoenix Landing Massage, we embody this spirit of renewal and transformation. Our goal is to provide a healing experience that allows you to let go of the burdens of daily life and emerge feeling refreshed and revitalized.</p>
      <p>Whether you are seeking relaxation, relief from pain, or a moment of tranquility, our massage services are designed to help you rise above and embrace a new sense of well-being.</p>
      <p>The phoenix is a symbol of renewal and rebirth, which is what I hope to bring to my clients through massage therapy. Just as the phoenix rises from the ashes, I aim to help you rise above stress and tension, leaving you feeling rejuvenated and ready to take on the world.</p>
    </article>

  </div>
</section>