JSFiddle - React, Tailwind, and code Playground

by k_sav

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;
}

.hero__content {
  flex: 1;
  background-color: deeppink;
}

.hero__media {
  flex: 2 0 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%;
}