CSS Flexbox - Image alignment

Question

I'm handling a simple flexbox-based banner, which is working almost perfectly. The only problem is whith this part (above 37.4375em):

@media (min-width: 37.4375em) {
  .FlexCtaBanner--innerWrapper {
    flex-basis: 12rem;
  }
  .FlexCtaBanner-image {
    flex-basis: 12rem !important;
  }
}

In the edge cases for vertical images, I'd like for the image to align to the left. Is it possible without nesting it inside another div?

Constraints:

• not introduce new HTML elements;
• not set extra media queries;

.rounded-lg {
  border-radius: 0.5rem !important;
}
.box-shadow-1 {
  box-shadow: 0 0 1px 0 rgba(21, 21, 21, 0.1),
    0 2px 8px -1px rgba(21, 21, 21, 0.2) !important;
}
.display-flex {
  display: flex !important;
}
.flex-direction-column {
  flex-direction: column !important;
}
@media (min-width: 37.4375em) {
  .sm\:flex-direction-row {
    flex-direction: row !important;
  }
}
.flex-wrap {
  flex-wrap: wrap !important;
}
@media (min-width: 37.4375em) {
  .sm\:align-items-center {
    align-items: center !important;
  }
}
@media (min-width: 37.4375em) {
  .sm\:justify-content-center {
    justify-content: center !important;
  }
}
.align-self-flex-start {
  align-self: flex-start !important;
}
@media (min-width: 37.4375em) {
  .sm\:align-self-auto {
    align-self: auto !important;
  }
}
@media (min-width: 62.4375em) {
  .md\:align-self-flex-start {
    align-self: flex-start !important;
  }
}
.flex-initial {
  flex: 0 1 auto !important;
}
.flex-grow {
  flex-grow: 1 !important;
}
.flex-shrink {
  flex-shrink: 1 !important;
}
.gap-y-4 {
  row-gap: 1rem !important;
}
.gap-x-10 {
  -moz-column-gap: 2.5rem !important;
  column-gap: 2.5rem !important;
}
@media (min-width: 37.4375em) {
  .sm\:gap-y-0 {
    row-gap: 0 !important;
  }
  .sm\:gap-x-10 {
    -moz-column-gap: 2.5rem !important;
    column-gap: 2.5rem !important;
  }
}
.max-w-none {
  max-width: none !important;
}
.max-h-32 {
  max-height: 8rem !important;
}
.p-4 {
  padding: 1rem !important;
}
.m-0 {
  margin: 0 !important;
}
.mb-2 {
  margin-bottom: 0.5rem !important;
}
@media (min-width: 37.4375em) {
  .sm\:px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .sm\:ml-8 {
    margin-left: 2rem !important;
  }
}
.type-body-one {
  line-height: 1.75 !important;
  font-size: 1rem !important;
  letter-spacing: -0.0125rem !important;
  font-family: "CircularStd-Book", Arial, sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
}
.type-body-one::before,
.type-body-one::after {
  content: "" !important;
  display: block !important;
  height: 0 !important;
  width: 0 !important;
}
.type-body-one::before {
  margin-bottom: calc(-0.375em + 0px) !important;
}
.type-body-one::after {
  margin-top: calc(-0.375em + 0px) !important;
}
@media (min-width: 37.4375em) {
  .type-body-one {
    line-height: 1.75 !important;
    font-size: 1rem !important;
    letter-spacing: -0.015625rem !important;
  }
  .type-body-one::before,
  .type-body-one::after {
    content: "" !important;
    display: block !important;
    height: 0 !important;
    width: 0 !important;
  }
  .type-body-one::before {
    margin-bottom: calc(-0.40625em + 0px) !important;
  }
  .type-body-one::after {
    margin-top: calc(-0.40625em + 0px) !important;
  }
}
.font-bold {
  font-weight: 700 !important;
}
.leading-6 {
  line-height: 1.5rem !important;
}

@media (min-width: 37.4375em) {
  .FlexCtaBanner {
    flex-direction: row;
  }
}
.FlexCtaBanner--innerWrapper {
  -moz-column-gap: 4.125rem;
  column-gap: 4.125rem;
}
@media (min-width: 37.4375em) {
  .FlexCtaBanner--innerWrapper {
    flex-basis: 12rem;
  }
  .FlexCtaBanner-image {
    flex-basis: 12rem !important;
  }
}
.FlexCtaBanner-text {
  text-wrap: balance;
}
@media (min-width: 37.4375em) {
  .FlexCtaBanner-text {
    flex-basis: 18rem;
  }
}
.FlexCtaBanner-cta {
  white-space: nowrap;
}
@media (min-width: 37.4375em) {
  .FlexCtaBanner-cta {
    justify-self: end;
  }
}

<div data-cy="ugcCollectionBanner-291f9ea3-1636-43b7-9ea6-fe75b6edb462" class="FlexCtaBanner display-flex flex-direction-column sm:flex-direction-row flex-wrap sm:align-items-center sm:justify-content-center gap-y-4 gap-x-10 sm:gap-x-10 sm:gap-y-0 p-4 bg-white box-shadow-1 sm:px-4 rounded-lg">
    <div class="FlexCtaBanner--innerWrapper display-flex flex-direction-column flex-grow flex-shrink sm:flex-direction-row flex-wrap sm:align-items-center gap-y-4">
        <img class="FlexCtaBanner-image display-flex flex-initial align-self-flex-start sm:align-self-auto md:align-self-flex-start max-w-48 max-h-32" src="https://dev.bankrate.com/f/166230/1729x2500/4bd76da4b8/mock_content_logo_vertical01.svg" alt="CTAWe want to know what you think about {THING}">
        <div class="FlexCtaBanner-text flex-grow flex-shrink">
            <h3 class="type-body-one font-bold text-black leading-6 m-0 mb-2">We want to know what you think about {THING}</h3>
            <p class="m-0 text-slate leading-6">Have experience with {THING}? Let us know your thoughts.</p>
        </div>
    </div>
    <!-- htmlmin:ignore -->
    <button class="FlexCtaBanner-cta Button Button--primary max-w-none sm:ml-8 " data-beam-element-clicked="" id="UGC_review_entrypoint_small" data-type="button" data-location="UGC_review_entrypoint_small" data-position="1" data-text="Review this" data-outcome="open_review_questions" data-beam-uid="2" data-beam-event="click">
    Write review
    </button>
    <!-- htmlmin:ignore -->
</div>