Make text flow? Make a grown man cry!

[Outer_net_1]

I am about to go mad, can anyone help?

I would like to try and achieve 2 objectives for a custom layout of my collection template.

1. The collection description starts directly below the profile sections.

2. The collection description text needs to be to the left of the profile bio image

3. The collection description extends to full width as it passes below the bio image section.

   SEE MOCK UP BELOW

It is also important that the collection description remains full width on pages with none of the content added via metafields. Lastly I need to make sure that there is the proper break between the end of the collection description and the start of the products.

I found this interesting solution but have no idea how it would be applied

https://codepen.io/chadwickmeyer/pen/gqqqNE

Live dev site
https://water-street-gallery.myshopify.com/collections/dominic-vince

Pass = wsg

Current Code

HTML

<div class="one-whole column">
  <div class="feature-divider"></div>
</div>

{% comment %} Check to see if sidebar should be enabled {% endcomment %}
{% if section.blocks.size > 0 and collection.handle != 'types' and collection.handle != 'vendors' %}
  {% assign sidebar = true %}
{% else %}
  {% assign sidebar = false %}
{% endif %}

<div
  class="
    content-wrapper
    is-flex
    is-flex-wrap
  "
>
  {%
    render 'sidebar',
    results: collection,
    has_faceted_filtering_block: has_faceted_filtering_block,
  %}

  {% assign bio_image = collection.metafields.custom.profile_img %}
  {% assign profile_quote = collection.metafields.custom.profile_quote %}
  {% assign profile_stats = collection.metafields.custom.profile_stats %}
  {% assign exhibition_callout = collection.metafields.custom.exhibition_callout %}
  {% if exhibition_callout != blank %}
  {% assign linked_collection = collections[exhibition_callout] %}
  {% else %}
  {% assign linked_collection = nil %}
  {% endif %}
  
  <div class="has-sidebar-option sidebar-enabled--{{ sidebar }} artist-profile-section">
      <div class="container">
          <div class="profile-and-bio-image">
              <!-- Profile and Description Sections -->
              <div class="profile-and-description {% if bio_image == empty %}full-width{% endif %}">
                  <!-- Profile Sections -->
                  <div class="profile-sections">
                      <!-- Profile Quote Section -->
                      <div class="profile-quote">
                          {% if profile_quote %}
                              <p>{{ profile_quote }}</p>
                          {% endif %}
                      </div>
                      <!-- Vertical Divider -->
                      {% if profile_quote and profile_stats %}
                          <div class="vertical-divider"></div>
                      {% endif %}
                      <!-- Profile Stats Section -->
                      <div class="profile-stats">
                          {% if profile_stats %}
                              <p>{{ profile_stats }}</p>
                          {% endif %}
                      </div>
                  </div>
              </div>
              <!-- Bio Image and Button Section -->
              {% if bio_image %}
              <div class="bio-image-and-button">
                  <img src="{{ bio_image | img_url: 'medium' }}" alt="Collection Bio Image">
                  {% if linked_collection %}
                      <div>
                          <div class="button-label">
                              Discover {{ collection.title | split: ' ' | first }}'s work in
                          </div>
                          <a href="{{ linked_collection.url }}" class="global-button">
                              {{ linked_collection.title }}
                          </a>
                      </div>
                  {% endif %}
              </div>
              {% endif %}
          </div>
          <!-- Collection Description Section -->
          <div class="collection_description rte full-width">
              {{ collection.description }}
          </div>
      </div>
  </div>
  
  <!-- Product Listing Section -->
  <div class="product-listing-section">
      <div class="container">
          <div class="one-whole column">
              {% if collection.products.size == 0 %}
              <div class="product-list product-list--collection">
                  <p class="quote">{{ 'collections.general.no_matches' | t }}</p>
              </div>
              {% else %}
              {%
                  render 'product-loop',
                  paginate: paginate,
                  products: products,
                  skip_product: product,
                  products_per_row: section.settings.products_per_row,
                  sidebar: sidebar,
              %}
              {% endif %}
          </div>
      </div>
  
      {% if settings.pagination_type == 'basic_pagination' %}
      <!-- Pagination Section -->
      {%
          render 'pagination',
          paginate: paginate
      %}
      {% endif %}
  </div>

</div>
{% endpaginate %}
</div>
</section>

CSS

/* Base layout styling */
.artist-profile-section {
    display: flex;
    flex-direction: column;
    position: relative; /* Essential for absolute positioning of children */
}

.profile-and-bio-image {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.profile-and-description {
    flex-grow: 1;
    width: 70%; /* Controls the width to the left */
}

.bio-image-and-button {
    flex-shrink: 0;
    width: 30%;
    text-align: center;
    align-self: start;
    margin-bottom: 50px; /* Space below the bio image section */
    padding-bottom: 20px; /* Additional padding for aesthetic spacing */
}

.profile-sections {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.profile-quote, .profile-stats {
    flex: 1;
}

.vertical-divider {
    width: 1px;
    background-color: #000;
    align-self: stretch;
    margin: 0 20px;
}

.collection_description {
    width: 70%; /* Matches the width of the profile description */
    position: relative; /* Changed to relative */
    left: 0;
    top: 0; /* Reset top */
    z-index: 10; /* Keep the z-index to ensure it stays on top */
    padding-bottom: 50px; /* Push away any elements below */
}

.collection_description.full-width {
    width: 100%;
}

.container {
    display: flex;
    flex-wrap: wrap;
}

.container > .collection_description {
    width: 70%; /* Make the width 70% when alongside the bio image */
}

Mock up

Thank you in advance for any suggestion