JSFiddle - React, Tailwind, and code Playground
HTML
<div id="panel">
<div id="table">
<div style="width:100%; display:table-cell; vertical-align:middle;">
<p id="intro">' Graduated with a background in Biological Sciences and pursuing a Masters of Industrial Design at Pratt Institute. I like minimalism and I love everything from Studio Ghibli. '</p>
<div id="profile">
<h1> Education </h1>
<div class="list">
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
<div class="list">
<h1> Experience </h1>
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
<div class="list">
<h1> Skill Set </h1>
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
<div class="list">
<h1> Interests </h1>
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS
#intro {width:35%; float:left;position:relative; left:2.5%; font-family: 'UtopiaStd';font-size:2.5vw; color:#fff;}
.list { display:inline-block;position:relative; }
#profile { width:75%; float:right; position:relative;}
#table { display:table; height: 100%; width: 100%;}
#lower {
width: 100%;
position: absolute;
bottom: 0;
}
#panel {
display: visible;
height: 50vh;
background-color: #aaaaaa;
padding: 10px;
overflow:hidden;
}