JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div id="book">
        <div id="lft_page" class="page">
            <div class="skin_page_top_wrapper">
                <div class="skin_page_top"></div>
            </div>
            <div class="content">Left page content</div>
        </div>
        <div class="page_binding"></div>
        <div id="rgt_page" class="page">
            <div class="skin_page_top_wrapper">
                <div class="skin_page_top"></div>
            </div>
            <div class="content">Right page content</div>
        </div>
    </div>
</div>

CSS

#main{
    width: 80%;
    margin-top: 30px;
}
#book{
    display: table;
    width: 100%;
    min-height: 240px;
    text-align: center;
    background-color: #CCCCCC;
}
.page_binding{
    display: table-cell;
    width: 2%;
}
.page{
    display: table-cell;
    position: relative;
    vertical-align: top;
    width: 49%;
    background-color: #F0F0F0;
}
.content{
    background-color: #FFF;
    height: 200px;
    margin: 25px 20px;
}
.skin_page_top_wrapper{
    position: relative;
}
.skin_page_top{
    position: absolute;
    top: -10px;
    left: 0px;
    width: 100%;
    height: 10px;
    background-color: red;
}