JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="A">
        <div id="B">
            <div id="C">
                <div id="D">
                    <div id="D1">D1</div>
                    <div id="D2">
                        D2 - long content
                        <br/>line
                        <br/>line
                        <br/>line
                        <br/>line
                        <br/>line
                        <br/>line
                        <br/>line
                        <br/>line
                        <br/>line
                        <br/>line
                        <br/>line
                        <br/>line
                        <br/>line
                        <br/>line
                        <br/>line
                        <br/>line
                        <br/>line
                        <br/>line
                        <br/>line
                        <br/>line
                        <br/>line
                        <br/>line
                        <br/>line
                        <br/>line
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    display: block;
}

#A{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: whitesmoke;
    display: block;
    overflow: hidden;
    position: fixed;
}
#B {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0 8px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;   
    vertical-align: baseline;
    display: block;
}
#B:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#C {
    background: grey;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    max-height: 90%;
    width: 60%;
    overflow: hidden;
}

#D {
    height: 100%;
}
#D1 {
   
}
#D2 {
    
}