JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    	<div class="leftimg">
            <span>I am an image</span>
        </div>
        <div class="rightside">
        <div class="project-title">
        	<span class="title1">I Am Main Title</span><span class="title2">Sub title</span>
        </div>
        <div class="context">
        	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
        </div>
    </div>
</div>

CSS

.wrapper {
	position: absolute;
	max-width: 1200px;
	width: 100%;
	margin-left: 10px;
	background: #3c3c3c;
}

.leftimg{
    width:600px;
    height: 2900px;
    background: #8cceff;
    position: relative;	
	float: left;
}

.rightside {
	background: #F96;
	float: right;
	width: 50%;
	height: 100%;
}

.projectimg {
	width: 600px;
	position: relative;	
	float: left;
	margin-bottom: 50px;
}

.project-title {
	font-family: 'Abel';
	color: #FFF;
	float: left;
	margin-left: 40px;
	font-weight: 300;
	display: block;
}

.project-title .title1 {
	font-size: 2.5rem;
}
.project-title .title2 {
	font-size: 1.4em;
	clear: both;
	display:block;	
}

.context {
	float: left;
	color: rgba(255,255,255, 0.7);
	width: auto;
	margin: 20px 0 0 40px;
	display: block;
	position: relative;
}
.context p {
	font-size: 1.06rem;
	line-height: 1.6rem;
	font-family: 'Roboto Condensed';
	font-weight: 300;
}