JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div id="main">
		<section id="a">Test1</section>
        <section id="b">Lorem Ipsum<br/>dolor<br/>sit<br/>amet.</section>
	</div>
</body>

CSS

#a {
	flex: 1 0 auto;
}
#b {
    padding:10px;
	min-height: 3em;
    background-color: yellow;
        
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
    -moz-box-align: center;

    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
  
}
#a {
    background-color: blue;
    padding: 10px;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
    -moz-box-align: center;

    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
    
}

#main {
	display: flex;
	flex-direction: column;
	height: inherit;
}

body {height: inherit;}html {height: 100%;}