JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div class="top">
    <img src="http://blindbully.com/wp-content/uploads/2012/12/Allen-Edmonds-Strand-Walnut4.jpg" alt="" />
    </div>
    <div class="bottom">
    <p>the quick brown fox jumped over the lazy dogsthe quick brown fox jumped over the lazy dogsthe quick brown fox jumped over the lazy dogsthe quick brown fox jumped over the lazy dogsthe quick brown fox jumped over the lazy dogsthe quick brown fox jumped over the lazy dogsthe quick brown fox jumped over the lazy dogsthe quick brown fox jumped over the lazy dogs</p>
    </div>
</div>

CSS

#container {
    display:table;
    height:500px;
    width:700px;
    padding:10px;
    background-color:#ccc;
}
#container img {
    height:100%;
    width:auto;
    
}

.top {
    display:table-row;
    height:100%;
}
.bottom {
    display:table-row;
    height:100%;
}