JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div>
    <img src="http://placehold.it/500x50">
  </div>
  <div class="middle">
    <div class="left">
      <p>Text here</p>
    </div>
    <div class="right">
      Video 
    </div>
  </div>
  <div>
    <img src="http://placehold.it/500x50">
  </div>
</div>

CSS

.middle {
  overflow: hidden;
  padding: 40px;
}
.wrapper {
  max-width: 500px;
}

.left,
.right {
  width: 50%;
  float: left;
  min-height: 100px; 
}

.left {
  background: #ccd;
}

.right {
  background: #ccf;
}