JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  <div class="about-wrap">
    	<div class="about-cnt">
    		<div class="about-ttl">
          <h1>ABOUT</h1></div>
          <div class="about-txt"><p>
            Viris tibique scaevola mea ut, soluta forensibus                     suscipiantur et usu, his at munere fabellas. Cu                       harum quaestio cum, mei </p>
          </div>
    </div> <!-- End of about-cnt -->
  </div> <!-- End of about-wrap -->
</section>

CSS

h1 {
	font-size: 1em;
	font-weight: bold;
	font-family: 'Montserrat', sans-serif;	
	letter-spacing: 15px;
  padding: 0;
  margin: 0;
}
p {
	font-family: 'Maven Pro', sans-serif;
  padding: 0;
  margin: 0;
}
/* Section styles */
.about-wrap {
	width: 100%;
	clear: both;
}
.about-img {
	width: 50%;
	float: left;	
}
.about-cnt {
	width: 50%;
	float: right;
}
.about-ttl {
width: 20%;
float: left;
transform: rotate(-90deg);
margin-top:100px; 
}
.about-txt {
	width: 60%;
	margin-right: 20%;
	float: right;	
}