JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div class="left">	<span>
					 ONCE YOU <br>	
					 PICK US, <br>
					 YOU WILL <br>
					 NEVER <br>
					 WANT TO <br>
					 GO <br>
					 ANYWHERE <br>
					 ELSE <br>
					</span>	
    </div>
    <div class="right">	<span>Abouts us</span>

        <button class="about-btn"><a href="#">Know More</a>
        </button>
    </div>
</div>

CSS

/*<!-- http://www.pentaloop.com/wp-content/themes/yalin/images/v-shadow-left.png -->*/
  * {
      padding: 0;
      margin: 0;
      font-family:'Roboto Condensed', sans-serif;
  }
  body {
      color: #fff;
  }
  .right, .left {
      height : 500px;
      width:50%;
      float: left;
      text-align: center;
      font-size: 3em;
  }
  .right {
      background: #BBFB40;
      font-size: 4em;
  }
  .left {
      color: #a8a9a9;
      background: url(http://www.pentaloop.com/wp-content/themes/yalin/images/v-shadow-left.png) no-repeat right center, #eaf8fb;
  }
  span:after {
      content:'';
      height: 100%;
      display: inline-block;
      vertical-align: middle;
  }
  span {
      display:inline-block;
      vertical-align:middle;
      font-weight: 700;
      letter-spacing: -3px;
      height: 100%;
  }
  .about-btn {
      margin-top: 20px;
      font-size: .3em;
      text-transform: uppercase;
      padding: 10px 20px;
      outline:none;
      border: none;
      display: block;
      background: #000;
      -webkit-box-shadow: 3px 0 0 rgba(0, 0, 0, .6);
      box-shadow: 0 3px 0 rgba(0, 0, 0, .6);
      color: #fff;
      margin-right: auto;
      margin-left: auto;
  }
  .right p {
      margin-top: 150px;
      text-transform: uppercase;
      letter-spacing: -3px;
      font-weight: 700;
  }
  .right a {
      text-transform: uppercase;
      color: #fff;
      text-decoration: none;
      display: block;
      cursor: crosshair;
  }