Hi, how can I think of the order of elements in the stream to go h2 h3 h1, and visually everything looked like this https://jsfiddle.net/wobsrph1/

h1{ width:200px; border: 1px black solid; height:400px; float:left; } h2{ width: calc(100% - 300px); float:right; border: 1px black solid; height:100px; } h3{ width: calc(100% - 300px); float:right; border: 1px black solid; height:300px; } 
 <h1>3</h1> <h2>1</h2> <h3>2</h3>

    1 answer 1

     * { padding: 0; margin: 0; box-sizing: border-box; } h1 { width: 200px; border: 1px black solid; height: 400px; float: left; margin-top: -100px; } h2 { width: calc(100% - 300px); float: right; border: 1px black solid; height: 100px; } h3 { width: calc(100% - 300px); float: right; border: 1px black solid; height: 300px; } 
     <h2>h2</h2> <h3>h3</h3> <h1>h1</h1>