JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<section class="hero">
  <div class="hero__content">
    <h2>This is a awesome movie!</h2>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos excepturi molestiae rerum commodi animi, qui vel esse hic facilis facere!
    </p>
  </div>

  <div class="hero__media video-embed">
    <iframe src="https://www.youtube-nocookie.com/embed/ue80QwXMRHg?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</section>

SCSS

* {
	box-sizing: border-box;
}

body {
	padding: 0;
	margin: 0;
}

.hero {
  display: flex;
  flex-wrap: nowrap;
  background-color: deeppink;
}

.hero__content {
 flex: 1 0 a;
}

.hero__media {
  flex: 1 1 auto;
  background-color: deepskyblue;
}

.video-embed {
position: relative;
  padding-bottom: 56.25%;
  height: 0;
  max-width: 950px;
    width: 100%;
}
.video-embed iframe {
position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}