JSFiddle - React, Tailwind, and code Playground

by the94air

HTML

<header>
  <div class="left-bg"></div>
  <div class="pin">
    <div class="wrap">
      <div class="child">
        <h1>This is the page titile</h1>
      </div>
      <div class="child">
        <img src="https://via.placeholder.com/150" alt="">
      </div>
    </div>
  </div>
</header>

CSS

body {
  margin: 0;
}

header {
  height: 100vh;
  width: 100%;
  position: relative;
}

.left-bg {
  height: 100%;
  width: 50%;
  background: red;
}

.wrap {
  display: flex;
}

.pin {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  left: 0;
}

.child {
  width: 50%;
}