Два встроенных div - один грипп sh слева и другой справа содержится

Question

Два деления рядом, оба 50% ширины. Оба содержатся в контейнере «max-width», и оба должны всегда иметь одинаковую высоту (связаны). Я бы хотел, чтобы левый div вытянул грипп sh влево (вне контейнера), в то время как правый div остался закрытым.

Я пытался присвоить левой стороне "position: absolute", но затем я необходимо указать высоту и ширину, чтобы увидеть его, и высота больше не связана между двумя div. Я врезался в стену и не могу понять это.

HTML

<div class="container">
  <div class="left"></div>
  <div class="right">
     <p>This element is contained within the container. This element is contained within the container. </p>
  </div>
</div>

CSS

.container {
  max-width: 900px;
  margin: 0 auto;
}
.left {
  display: table-cell;
  background: url('https://cdn.pixabay.com/photo/2016/11/01/13/54/europe-1788319_960_720.jpg') center center no-repeat scroll;
    background-size: cover;
vertical-align: middle;
  width: 50%;
}
.right {
  display: table-cell;
  width: 50%;
  padding: 80px;
  background-color: #eee;
}

Fiddle: https://jsfiddle.net/bgzvac35/