JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div id="page">
    <div id="row-header">HEADER-ROW - Logo</div>
    <div id="row-body">
        <div id="col-left" >COL-LEFT - Emails</div>
        <div id="col-right" >
            <div id="row-email-header" >
                <div>EMAIL HEADER - To/From etc.</div>
            </div>
            <div id="row-email-body">
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
                <p>email body</p>
        </div>
    </div>
</div>

CSS

@CHARSET"UTF-8";
 html, body {
    height: 100%;
    margin: 0;
}

#page{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
#row-body {
    position:absolute;
    top:130px;
    left:0;
    right:0;
    bottom:0;
}
#col-right{
    position:absolute;
    top:0;
    left:33.3333%;
    right:0;
    bottom:0;
}
#col-left{
    position:absolute;
    top:0;
    right:33.3333%;
    left:0;
    bottom:0;
}
#row-email-header {
    height: 140px;
}


#row-header, #row-email-header, #row-email-body {
    position:relative;
    display:block;
}

#row-header {
    height: 130px;
}

#row-email-body {
 position:absolute;
    top:140px;
    bottom:0;
    left:0;
    right:0;
    overflow-y: scroll;
}

/* Debug Colors Only */
#row-header { background: #ddd; }
#row-body { background: #ece; }
#col-left { background: #ccc; }
#col-right { background: #bbb; }
#row-email-header { background: #999; }
#row-email-body { background: #888; }
#page { background: #eee; }