My goal is to to create an animation (css / jquery), so green box slides (grows) over red one (red one is fixed).
Then toggle it back : green shrinks and red comes back again.

Using ("#green").css("wdith") makes the red one being pushed and I want to avoid that.

```
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

</head>

<body>
<style>
.green {
    width:400px;
    background-color:green;
    display:inline-block;
    height:320px;
}
.red{
    width:200px;
    background-color:red;
    display:inline-block;
    height:320px;   
}
</style>

<div>
<div id="green" class="green">eezez</div>
<div id="red" class="red">eezez</div>

    <script>
    $(function() {
        $("#action").click(function() {
            // toggle so green grows and takes red place (red does not move)
            // toggle so green shrinks and so red takes his initial place again
        });
    });
</script>

</div>
</body>
</html>

```

here is the fiddle:

<http://jsfiddle.net/Sj575/>