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 dogfdsafsafsadfsathe 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 dogfdsafsafsadfsas</p>
    </div>
</div>

CSS

#container {
    display:flex;
    flex-direction:column;
    height:500px;
    width:700px;
    padding:10px;
    background-color:#ccc;
}
#container img {

}
.top {
    background:url('http://blindbully.com/wp-content/uploads/2012/12/Allen-Edmonds-Strand-Walnut4.jpg') no-repeat center;
    display:flex;
    background-size:contain;
    flex-grow:1;
}
.bottom {
    display:flex;
    flex-grow:0;
}