Позиционирование двух блоков и текста

*{ 
margin:0; 
padding:0; 
} 
 
html,body{ 
height:100%; 
} 
 
.wrapper{ 
width:100%; 
height:50%; 
position:relative; 
} 
 
.block1,.block2{ 
width:50%; 
height:100%; 
float:left; 
box-sizing:border-box; 
} 
 
.block1{ 
background:blue; 
} 
 
.block2{ 
background:red; 
} 
 
p{ 
position:absolute; 
top:50%; 
left:50%; 
transform:translate(-50%,-50%); 
}

<div class="wrapper"> 
  <div class="block1"></div> 
  <div class="block2"></div> 
  <p>Это текст выше этих блоков</p> 
</div>

.firstBlock { 
  width: 50%; 
  float: left; 
  height: 100vh; 
  background: #ccc; 
  position: relative; 
} 
 
.firstBlock p { 
  position: absolute; 
  top: 2rem; 
  left: 95%; 
  text-align: center; 
  z-index: 10; 
  color:#fff; 
} 
 
.secondBlock { 
  width: 50%; 
  float: left; 
  height: 100vh; 
  background: #000; 
  margin-left: -1rem; 
  margin-top: 1rem; 
}

<div class="firstBlock"> 
     <p>Text</p> 
</div> 
<div class="secondBlock"> 
</div>