<div>
<article>
  <h1>Lorem ipsum dolor</h1>
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/10558/teaser-cad-demo-image.jpg" alt="a little town" />
  <p>Lorem ipsum dolor sit amet consectetur adipiscing, elit inceptos nunc et litora, cras class id morbi viverra. Leo in hac vel sed molestie fringilla fusce orci, dis nibh pharetra quisque inceptos interdum tortor, porta parturient varius magna curae feugiat vestibulum egestas, suscipit facilisi accumsan torquent aptent lobortis.</p>
</article>
</div>

* { box-sizing: border-box; }
body { margin: 5vh; font-family: Avenir, Roboto, Helvetica, san-serif; background: #999;}
div {  height: 90vh; }

article {
  display: grid; 
  grid-template-columns: 1fr minmax(0, 40ch) 1fr;
  grid-template-rows: 20% 2fr auto auto 1fr;
  width: 100%;
  height: 100%;
}
h1 {
  grid-column: 2 / 4;
  grid-row: 3 / 4;
  align-self: end;
  background: black;
  color: white;
  margin: 0;
  padding: 1.4rem;
  line-height: 1.2;
  font-weight: normal;
}
img {
  grid-column: 1 / 3;
  grid-row: 1 / 6;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}
p {
  grid-column: 2 / 4;
  grid-row: 4 / 5;
  align-self: start;
  background: white;
  padding: 1.4rem;
  margin: 0;
}