JSFiddle - React, Tailwind, and code Playground

by Petra1999

HTML

<div class="box-wrapper box-wrapper--two">
  <div class="box box--teaser">
    <img src="https://via.placeholder.com/500/FFFF00/000000" />
    <h2>Almleben Dirndl</h2>
    <a href="#">Jetzt Entdecken</a>
  </div>
  <div class="box">zwei</div>
</div>

CSS

.box-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  >* {
    .unitize-margin(0, 0, 45, 0);
    &:last-of-type {
      margin-bottom: 0;
    }
  }
}

.box-wrapper {
  display: grid;
  grid-gap: 45px;
  >* {
    margin-bottom: 0;
  }
  &:not(.box-wrapper--narrow) {
    width: 96vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -48vw;
    margin-right: -50vw;
  }
  &.box-wrapper--two {
    grid-template-columns: 5fr 3fr;
  }
  .box {
    width: 100%;
    background: #efefef; // testing
    &.box--image {
      display: contents;
      img {
        width: 100%;
      }
    }
    &.box--teaser {
      h2 {
        position: absolute;
      }
      .discover-button {
        position: absolute;
        &::before {
          content: '»';
        }
      }
    }
  }