JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">

	<div class="sub">
		
		<div class="sub-text">
			
			<h1>Header</h1>
				
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet tellus vitae nisi feugiat malesuada. Phasellus semper vehicula ante. Pellentesque ut finibus nisl. Cras tempus, eros ut aliquam mollis, metus diam efficitur neque, non pellentesque eros mi a felis. In lectus ipsum, rutrum at risus eget, faucibus sodales ipsum. Nam vel interdum libero. Donec ac lacus interdum, rutrum neque sit amet, vestibulum tellus.</p>
				
			<a href="#">My Link</a>
			
		</div>
						
		<div class="sub-img">img 1</div>
					
	</div>
	
</div>

CSS

#main {
	width:100%;
	height:400px;
	overflow: hidden;
    white-space: nowrap;
	background:pink;
}

.sub {
	width:80%;
	display: inline-block;
	height:400px;
	position:absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
}

.sub-text {
	width:70%;
	height:100%;
	float:left;
	background:lime;
	overflow: none;	
}

.sub-img {
	width:30%;
	height:100%;
	float:right;
	background:red;
	display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: flex-end;
    align-items: center;	
}