JSFiddle - React, Tailwind, and code Playground

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<!--Header with display: flow-root to contain the floating element --!-->
<header class="header">
 
 <!--Image floating to the right---!-->
  <div class="float">
    <img src="http://demo.themeies.com/leospa/images/spa.png">
  </div> 
  
   <!--The contents of this container must to be centered verticcally---!-->
  <div class="container">
     
        <div class="desc">
          <div>
            <h1 class="header__headingPage">
                Beauty and success starts here. It's Overwhelming this layout
            </h1>
            <p>
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia saepe omnis consectetur. Perferendis in, dolorem ex rerum quo reprehenderit sit, eveniet ducimus illum distinctio optio cum magni voluptate, enim eum.
          </p>
         </div>
      </div>    

  </div>

</header>
<div>
  <p>Some other content...</p>
</div>

CSS

* {
    margin: 0;
}

.header {
   display: flow-root;
}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* Image floting to the right, because his parent element have float: right ( .float class) */
img {
    width: 100%;
}

.float{
    float: right;
    width: 45vw;
    z-index: 1;
}

html,
body,
header,
.container {
    height: 100%;
}

/*
.desc{
  padding-top: 12%;
  padding-bottom: 12%;
}
*/

.desc {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.desc > div {
   width: 50%;
}

h1 {
    font-size: 1.5em !important;
    margin: 0 !important;
}