JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <!--everything on the page-->

<div class="left_bg">
  <p class="right_text">This is the easyiest way</p>
</div>


<div class="right_bg">
  <!--right background color of the page-->
  <div class="right_text">
     <!--right side text content-->
     <p>This works as well!</p>
  </div>
</div>




</div>

CSS

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display:grid;
  width: 100%;
  height: 100%;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}
p {
  place-self: center;

}

.right_bg {
  display: grid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}
.right_text {
  position: relative;
  z-index: 1;
  font-family: Raleway;
  font-size: large;
    place-self: center;

  
}