JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="header">
<div class="container">
  <div class="row">
    <div class="col">
      <div class="header__bg">
						<div>
							<h1>hey this is the best there is today. hey this is the best there is today.</h1>
						</div>
					</div>
    </div>
    <div class="col">
      <div class="header__text">

      </div>
    </div>
  </div>
</div>
</div>

CSS

.header {
	position: relative;
  height: 300px;
}
.header__bg {
    position: absolute;
    top: 20%;
    width: 70%;
    z-index: 5;
    background-color: red;
    padding: 15px;
}
.header__text {
  background-color: pink;
  height: 300px;
}