JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div id="A">A</div>
    <div id="CED">
        <div id="C">C</div>
        <div id="E">E</div>
        <div id="D">D</div>
    </div>
    <div id="B">B</div>
</div>

CSS

#main{
    border: 1px solid blue;
    width: 90%;
}
#A, #B{
    border: 1px solid red;
    background-color: #9ff;
}
#CED{
    max-width:840px;
}
#E{
    width: 40px;
    min-width: 40px;
    background-color: #f9f;
}
#C, #D{
    width: 50%;
    max-width: 400px;
    background-color: #ff9;
}
#C, #E, #D{
    display: table-cell; 
}