<div class="wrapper">
  <div class="cont">
    <div class="cont__item cont__item-1">
      <h5 class="title">Title</h5>
      <p class="content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </p>
    </div>
    <div class="cont__item">
      <figure class="poster">
        <img class="poster__image" src="http://ewigkeit.ucoz.club/codepen/wrapper-codepen.jpg" />
      </figure>
    </div>
  </div>
</div>
body {
  font-family: "Oswald", sans-serif;
  padding: 40px;
  background: white;
}

.wrapper {
  width: 100%;
  max-width: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  margin-bottom: 50px;
}

.cont {
  width: 100%;
  max-width: 992px;
  height: auto;
  display: grid;
  grid-gap: 0px;
  grid-template-columns: repeat(2, 1fr);
  grid-template-columns: 70% 30%;
  padding: 10px;
}

.cont__item {
  background: white;
  width: 100%;
  height: 380px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.cont__item-1 {
  padding: 30px;
  background: #151515;
  border-right: 5px solid #075141;
}

.title {
  font-family: "Oswald", sans-serif;
  font-size: 25px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
  margin-bottom: 25px;
}

.content {
  font-size: 20px;
  color: #fff;
  line-height: 1.2;
  font-family: "Oswald", sans-serif;
}

.poster {
  width: 100%;
  height: 100%;
}

.poster__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

External CSS

  1. https://moonpresence.site/moonpresence/foundation/css/base.css

External JavaScript

This Pen doesn't use any external JavaScript resources.