<!DOCTYPE html>
<html>
<head>
    <style>
        div.container { width: 350px; height: 175px; position: relative; }
        div.green { position: absolute; width: 100px; height: 100px; top: 50px; background-color: green; }
        div.line { vertical-align: bottom; display: inline-block; height: 50px; width: 200px; }
        div.wide { height: 100px; width: 200px; }
        div.narrow { height: 100px; width: 100px; background-color: red; }
        div.right { float: right; }
        div.left { float: left; }
    </style>
</head>
<body>
    <div class="container">
        <div class="green" style="left: 50px;"></div>
        <div class="line"></div>
        <div class="wide right"></div>
        <div class="narrow right"></div>
    </div>
    <div class="container">
        <div class="green" style="right: 0;"></div>
        <div class="line"></div>
        <div class="wide left"></div>
        <div class="narrow right"></div>
    </div>
    <div class="container">
        <div class="green" style="right: 50px;"></div>
        <div class="line"></div>
        <div class="wide left"></div>
        <div class="narrow left"></div>
    </div>
</body>
</html>
