<html> <head> <style> div { border: solid 1px; margin: 8px } #first-row, #second-row, #third-row { display: flex; border: dashed 2px grey; padding: 4px; } .a { border: solid 2px green; } .b { border: solid 2px red; } .c { border: solid 2px blue; } </style> </head> <body> <div id="first-row"> <section class="a" style="width: 30%">This takes some space</section> <section class="b" style="flex-grow: 1">This takes the rest</section> </div> <div id="second-row"> <section class="a" style="width: 100px;">This takes some space</section> <section class="b" style="flex-grow: 1">This takes half the leftover</section> <section class="c" style="flex-grow: 1">This takes the remaining half</section> </div> <div id="third-row"> <section class="a" style="flex-grow: 1">Proportions</section> <section class="b" style="flex-grow: 3">Are cool!!!</section> </div> </body> </html>