Shopify – Is there a way to make both Text First and image first layouts render in the same way

Below is my liquid file as I am building a shopify theme for someone, however when using the text-first layout the image is half hidden due to content after it and the height of the image-with-text div collapses

{% assign selectedImage = section.settings.image %}
{% assign layout = section.settings.layout %}

<div class='image-with-text'>
  <div class='container'>
    <div class='wrapper {% if layout == "image-first" %} image-first {% endif %}'>
      <div class='content-container'>
        <div class='content-inner'>
          <h3 class='title'>
            {{ section.settings.title }}
          </h3>
          <div class='text-container'>
            {{ section.settings.content }}
          </div>
          <div class='button-container'>
            <a href='{{ section.settings.button-link }}' class='button'>{{ section.settings.button-text }}</a>
          </div>
        </div>
      </div>
      <div class="image-container">
        {% if selectedImage %}
          <img
              src="{{ selectedImage.src | img_url: '600x600' }}"
              srcset="{{ selectedImage.src | img_url: '400x400' }} 400w,
              {{ selectedImage.src | img_url: '800x800' }} 800w,
              {{ selectedImage.src | img_url: '1200x1200' }} 1200w"
              sizes="(max-width: 400px) 100vw,
             (max-width: 800px) 50vw,
             33.3vw"
              alt="{{ selectedImage.alt | escape }}"
          />
        {% endif %}
      </div>
    </div>
  </div>
</div>

{% style %}
  /**
  text with image and accent dots
  */
  .image-with-text {
    position: relative;
    display: block;
    justify-content: center;
    align-items: center;
    padding: 20px;
    width: 100%;
  }

  .image-with-text .wrapper {
    display: inline-flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    position: relative;
  }

  .image-with-text .image-container,
  .image-with-text .content-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .image-with-text .content-container {
    display: flex;
    flex-direction: column;
  }


  .wrapper.image-first {
    flex-direction: row-reverse;
  }


  .image-with-text .image-container img {
    width: 100%;
    min-height: calc(100% + (160px * 3));
    object-fit: cover;
  }

  .image-with-text .content-container .content-inner {
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px;
    transform: translate(120px, 160px);
    background-color: white;
  }

  .image-with-text .image-first .content-container .content-inner {
    transform: translate(-120px, 160px);
  }

  .image-with-text .content-inner {
    align-self: stretch;
    height: auto;
  }

  .image-with-text .content-inner h3{
    margin-top: 0;
    font-size: 64px;
    margin-bottom: 0;
  }
{% endstyle %}

{% schema %}
{
  "name": "Accented Text with Image",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.image-with-text.settings.image.label"
    },

    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "Image with text"
    },

    {
      "type": "richtext",
      "id": "content",
      "label": "Content",
      "default": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum vestibulum ante, vel ultrices ante cursus eget. Vivamus finibus turpis eu quam feugiat, at convallis sapien finibus. Suspendisse potenti. Mauris nisl diam, accumsan fringilla nisi vitae, pharetra blandit erat. Nam purus leo, posuere sed viverra ut, rutrum sit amet justo.</p>"
    },

    {
      "type": "url",
      "id": "button-link",
      "label": "Button Link"
    },

    {
      "type": "text",
      "id": "button-text",
      "label": "Button Text",
      "default": "Read More"
    },


    {
      "type": "select",
      "id": "layout",
      "options": [
        {
          "value": "image-first",
          "label": "Image first"
        },
        {
          "value": "text-first",
          "label": "Text first"
        }
      ],
      "default": "image-first",
      "label": "Layout",
      "info": "Place image first or second"
    },
    {
      "type": "select",
      "id": "content_layout",
      "options": [
        {
          "value": "no-overlap",
          "label": "t:sections.image-with-text.settings.content_layout.options__1.label"
        },
        {
          "value": "overlap",
          "label": "t:sections.image-with-text.settings.content_layout.options__2.label"
        }
      ],
      "default": "no-overlap",
      "label": "t:sections.image-with-text.settings.content_layout.label"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.image-with-text.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "inline_richtext",
          "id": "heading",
          "default": "Image with text",
          "label": "t:sections.image-with-text.blocks.heading.settings.heading.label"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.image-with-text.blocks.text.name",
      "limit": 1,
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
          "label": "t:sections.image-with-text.blocks.text.settings.text.label"
        },
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "body",
              "label": "t:sections.image-with-text.blocks.text.settings.text_style.options__1.label"
            },
            {
              "value": "subtitle",
              "label": "t:sections.image-with-text.blocks.text.settings.text_style.options__2.label"
            }
          ],
          "default": "body",
          "label": "t:sections.image-with-text.blocks.text.settings.text_style.label"
        }
      ]
    },
    {
      "type": "button",
      "name": "t:sections.image-with-text.blocks.button.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "button_label",
          "default": "Button label",
          "label": "t:sections.image-with-text.blocks.button.settings.button_label.label",
          "info": "t:sections.image-with-text.blocks.button.settings.button_label.info"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "t:sections.image-with-text.blocks.button.settings.button_link.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary",
          "default": false,
          "label": "t:sections.image-with-text.blocks.button.settings.outline_button.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Accented Text With Image",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "button"
        }
      ]
    }
  ]
}
{% endschema %}

the variants should look like this

however this does not occur

placing the image works as expected however when i tried setting it to be second it collapses as described.

I’ve tried everything in CSS that I can think off and unfortunately this seems order dependent where an image can actaully set the height.

Id rather not use any hacky method to get this to work