As @kukkuz said, I also recommend doing it this way. Just put the contents of A, B, C in a separate container, in this case #content and add display: flex , flex-direction: column and flex: 1 to it, and don't use the inline style to style your HTML, as it does your code less understood. The most recommended way is to add CSS code to a separate file and link it with your HTML.
The following code is an example of how you could layout your desired layout without any inline styles.
HTML
<div id="wrapper"> <div class="left"> <div class="title">Title text</div> <div id="content"> <div class="second">Content A</div> <div class="third">Content B</div> <div class="fourth">Content C</div> </div> </div> <div class="right">Content D</div> </div>
CSS
div { padding: 5px 5px 5px 5px; margin: 1px 1px 1px 1px; } #wrapper { display: flex; height: 500px; } .left { flex: 3; display: flex; flex-direction: column; } #content{ flex: 1; display: flex; padding: 0; } .second, .third, .fourth { flex: 1; } .third { border: 1px dotted green; } .fourth { display: flex; align-items: flex-end; border: 1px dotted fuchsia; } .right { flex: 2; } .left, .title { border: 1px dotted lightpink; } .right, .second { border: 1px dotted orange; }
div { padding: 5px 5px 5px 5px; margin: 1px 1px 1px 1px; } #wrapper { display: flex; height: 500px; } .left { flex: 3; display: flex; flex-direction: column; } #content { flex: 1; display: flex; padding: 0; } .second, .third, .fourth { flex: 1; } .third { border: 1px dotted green; } .fourth { display: flex; align-items: flex-end; border: 1px dotted fuchsia; } .right { flex: 2; } .left, .title { border: 1px dotted lightpink; } .right, .second { border: 1px dotted orange; }
<div id="wrapper"> <div class="left"> <div class="title">Title text</div> <div id="content"> <div class="second">Content A</div> <div class="third">Content B</div> <div class="fourth">Content C</div> </div> </div> <div class="right">Content D</div> </div>