JSFiddle - React, Tailwind, and code Playground

by confile

HTML

<div id="content">
        
        <div id="top">
            <img src="http://upload.wikimedia.org/wikipedia/de/thumb/e/e1/Java-Logo.svg/100px-Java-Logo.svg.png" />
        </div>
        
        <span id="label">this is a test</span>
        
        <div id="main">
          main content
            sssdf  main content
             main content
             main content
             main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content
            
        </div>    
    </div>

CSS

#content {
    width: 100%;
	height: 500px;
    background-color: yellow;
    
	-webkit-box-flex: 1;
	-moz-box-flex: 1;
	box-flex: 1;
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto; 
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-webkit-box-orient: vertical; 
	-moz-box-orient: vertical;
	box-orient: vertical;
	flex-direction: column;
}

#top {
    background-color: lime; 
}

#label {
    background-color: aqua;    
}

#main {
    background-color: red;  
    
 -webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
-webkit-flex: 1 1 auto;
flex: 1 1 auto;  
}