<div class="flex">
  <figure>
    <img
      src="https://assets-online.pages.dev/images/lemon.jpg"
      alt="Lemon"
      width="1500"
      height="1000"
    />
  </figure>
  <h1>Fresh Lemon</h1>
</div>

.flex {
  display: flex;
  flex-direction: row-reverse;
}

.flex > h1 {
  margin-right: -80px;
}


/* ------------- base ------------- */
* {
  margin: 0;
}

body {
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica,
    Arial, sans-serif;
}

.flex {
  max-width: 600px;
  margin: auto;
}

img {
  width: 100%;
  height: auto;
  min-height: 200px;
  object-fit: cover;
  display: block;
}

h1 {
  flex: 0 0 250px;
  align-self: center;
  font-size: 40px;
}