JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>


<header>
  <span>TESTING SPAN</span>
  <p>
  TEST TEST TES TES TES TES
  </p>
  <div class="wrapper">

      <div>
          <span>BLACK CENTERED IN DIV</span>
      </div>
      <div>
          <span>RED CENTERED IN DIV</span>
      </div>
     
  </div>
</header>

</body>

</html>

CSS

html, body{
  max-width: 960px;

}
.wrapper{
  margin-left: auto;
  margin-right: auto;
  max-width:960px;
  padding: 0 10px;
}

header span{
  display: block;
  width: 100%;
  text-align: center;
  font-size: 50px;
  padding-top:20px;
  padding-bottom:5px;
}
header div span{
  display: block;
  width: 100%;
  text-align: center;
  font-size: 20px;
  position:relative;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}
header div + div span{
  display: block;
  width: 100%;
  text-align: center;
  font-size: 20px;
  position:relative;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  color: red;
}
header p{
  width: 100%;
  text-align: center;
  font-size: 20px;
  padding-bottom:5px;
}

header div:nth-child(1){
  width: 400px;
  height: 250px;
  background: #EEE;
}
header div:nth-child(2){
  width: 400px;
  height: 250px;
  background: #CCC;
}
header div:nth-child(1),
header div:nth-child(2){
  float:left;
}
header:after{
  display:block;
  clear:both;
  content:"";
}