JSFiddle - React, Tailwind, and code Playground

HTML

<div style="position: relative; width: 500px; height:500px;">
    <div class="container">
	<div class="part-one">
		<h1 class="header">This is some header</h1>
	</div>
	<div class="utilizationContainer" class="part-two">
		<img src="https://lh4.googleusercontent.com/--vSEaBUFGZ0/Ui6mDs73ybI/AAAAAAAAApk/2hlyZAHxHbI/w369-h553-no/IMG_9414.JPG"></img>
	</div>
</div>
</div>

CSS

.container {
	display:-ms-flexbox;
	-ms-flex-direction:row;
	-ms-flex-pack:justify;
	overflow-x:hidden;
	position:absolute;
	left:60px;
	right:60px;
	bottom:0px;
	height:400px;
}

.part-one {
	left: 0px;
	bottom: 100px;
	width: 300px;
	font-size: 22pt;
	color: white;
	min-width: 300px;
}

.part-two {
	max-width: 400px;
	width: 400px;
	min-width: 400px;
}

.header {
	font-size: 50pt;
	color: blue;
	margin-bottom: 10px;
}