<article>
        <section>
            <div class="description">
                <h1>NEW</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing</p>
            </div>
            <div class="img"><img src="https://picsum.photos/id/1015/180/230" width="180" height="230"></div>
        </section>
        <section>
            <div class="description">
                <h1>NEW</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing</p>
            </div>
            <div class="img"><img src="https://picsum.photos/id/1015/180/230" width="180" height="230"></div>
        </section>
    </article>
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

article {
  display: grid;
  width: 980px;
  margin: auto;
  //height: 500px;
  grid-template-rows: 1fr 3rem 3rem 1fr;
  grid-template-areas: "one" "two" "three" "four";
  height: 575px;
  &:before {
    content: "";
    background-color: #efebe7;
    display: block;
    grid-row: one / two;
    grid-column: 1 /-1;
  }
  &:after {
    content: "";
    background: #c7b19e;
    display: block;
    grid-row: three / four;
    grid-column: 1 /-1;
    z-index: -1;
  }
  img {
    //width: 100%;
    height: auto;
    display: flex;
    margin: auto;
    object-fit: cover;
    width: auto;
    height: 100%;
  }
  .description {
    display: flex;
    margin: auto;
    flex-direction: column;
    * {
      margin: 0;
    }
  }
  section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "one two";
    img {
      width: 54%;
    }
    &:nth-child(1) {
      grid-row: one / three;
      grid-column: 1 /-1;
      //background: lightgreen;
      .description {
        grid-column: one;
        grid-row: 1;
      }
      .img {
        grid-column: two;
        grid-row: 1;
      }
    }
    &:nth-child(2) {
      grid-row: two / four;
      grid-column: 1 /-1;
      //background-color: orange;
      z-index: 1;
      .description {
        grid-column: two;
        grid-row: 1;
      }
      .img {
        grid-column: one;
        grid-row: 1;
      }
    }
  } 
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.