How to use flexbox to get an image and text insid my border

Question

I'm trying to recreate this but I'm stuck on getting the image and text to fit inside the innermost border. the final is supposed to have an outside border, an inside border, and a div that expands across the top. Then a picture that is 30% width of the top spanning div. Then text that is supposed to be width 70% of the top spanning div.

This is what I got so far HTML:

:root {
  --winter-primary: #ffd110;
}

.outside-winter-border {
  border: 2px solid var(--winter-primary);
  margin: auto;
  max-width: 1000px;
}

.insdie-winter-border {
  border: 2px solid var(--winter-primary);
  margin: 20px;
}

.wh {
  background-color: var(--winter-primary);
  padding: 30px;
}

.winter-image {
  width: 30%;
  float: left;
}

.wi {
  width: 70%;
  float: right;
}

<section class="winter">
  <div class="outside-winter-border">
    <div class="insdie-winter-border">
      <div class="section-heading">
        <div class="wh">
          <h2>Winter</h2>
        </div>
      </div>
      <div class="content-wrapper">
        <div class="winter-image">
          <div class="section-image">
            <a href="winter.html">
              <img src="assets/images/winter.jpg" alt="Winter Image">
            </a>
          </div>
        </div>
        <div class="wi">
          <div class="section-content">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolore enim sequi dignissimos vel fugit reiciendis minus voluptatem nostrum, at repellat odio libero cum eveniet officiis, cumque veritatis, qui eaque.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

The exact desired result is unclear. However, here is a version using flex that gets both the image and text within the border. Don't use float.

.outside-winter-border {
  border: 2px solid var(--winter-primary);
  margin: auto;
  max-width: 1000px;
}

.insdie-winter-border {
  border: 2px solid var(--winter-primary);
}

img {
  height: 100%;
}

.wh {
  display: inline-flex;
}

.insdie-winter-border {
  display: flex;
  align-items: center;
}

:root {
  --winter-primary: #ffd110;
}

p {
  margin-left: 1em;
}

.section-heading {
  width: 100%;
  background-color: var(--winter-primary);
  text-align: center;
}

.section-heading>h2 {
  margin: 0;
}

<section class="winter">
  <div class="outside-winter-border">
    <div class="section-heading">
      <h2>Winter</h2>
    </div>
    <div class="insdie-winter-border">
      <div class="wh">
        <a href="winter.html">
          <img src="https://dummyimage.com/125/000/fff" alt="Winter Image">
        </a>
      </div>
      <div class="content-wrapper">
        <div class="winter-image">

        </div>
        <div class="wi">
          <div class="section-content">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolore enim sequi dignissimos vel fugit reiciendis minus voluptatem nostrum, at repellat odio libero cum eveniet officiis, cumque veritatis, qui eaque.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 2

I think you can try this (insted of .winter-image and .wi ):

.content-wrapper {
  display: flex;
}

.winter-image {
  flex: 3;
}

.wi {
  flex: 7;
}