JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

#main{
    border: 1px solid blue;
    width: 90%;
}
#A, #B{
    background-color: #9ff;
    clear: both;
}
#E{
    position: relative;
    width: 40px;
    background-color: #f9f;
    margin: 0 0px;
}
#C, #D{
    width: 50%;
    max-width: 400px;
    background-color: #ff9;
}
#C, #E, #D{
    float: left;
    display: block;
}
#C{
    margin-right: -20px;
}
#D{
    margin-left: -20px;
    text-indent: 20px;
}