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

Im trying to recreate this but im stuck on getting the image and text to fit inside the inner most border. the final is supposed to have an outside border, an inside border, a div that expands acros the top. Then a picture that is 30% width the top spanning div. Then text that is suppose to be width 70% of the top spanning div.

this is what i got so far html

<section >
    <div >
      <div >
    <div >
      <div >
      <h2>Winter</h2>
      </div>
    </div>
    <div >
      <div >
      <div >
        <a href="winter.html">
          <img src="assets/images/winter.jpg" alt="Winter Image">
        </a>
      </div>
    </div>
    <div >
      <div >
        <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>

css

.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;
}

CodePudding user response：

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

.content-wrapper {
  display: flex;
}

.winter-image {
  flex: 3;
}

.wi {
  flex: 7;
}

CodePudding user response：

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);
}

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

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

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

p {
  margin-left: 1em;
}

<section >
  <div >
    <div >
      <div >
        <div >
          <h2>Winter</h2>
          <a href="winter.html">
            <img src="https://dummyimage.com/75/000/fff" alt="Winter Image">
          </a>
        </div>
      </div>
      <div >
        <div >

        </div>
        <div >
          <div >
            <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>