<div class="stack">
  <img src='https://images.unsplash.com/photo-1487700160041-babef9c3cb55?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzNDA3ODYyMg&ixlib=rb-1.2.1&q=80&w=400' alt=''>
  <div class="title">
    Plant
  </div>
  <div class="tag">
    On sale!
  </div>
</div>
.stack {
  display: grid;
  width: fit-content;
}
.stack > * {
  grid-area: 1 / -1;
}

.title {
  align-self: end;
  padding: 1rem;
  font: 900 32px system-ui;
}

.tag {
  justify-self: end;
  align-self: start;
  margin-block-start: 1rem;
  font: 500 18px system-ui;
  padding: 1rem;
  background: limegreen;
}

img {
  max-width: 100%;
  min-width: 280px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.