title: A moving element to push adjacent element only if they collide
body: <p>I have a container with 2 children.</p>
  
  <p>One child has dynamic width and at it's maximum width can fill the container</p>
  
  <p>The other child has fixed width and starts off being hidden as it's starting point is to the right of the <code>overflow:hidden</code> container</p>
  
  <p>What I want is the fixed-width child to move to the left so that it exactly fits into the right of the container such that </p>
  
  <p>a) If both children fit into the container - the other element should say put on the left and</p>
  
  <p>b) If there is no room for both elements - the fixed-width element should push the other element to the left as much as it needs to in order to fit into the right of the container.</p>
  
  <p>Here is what I tried:</p>
  
  <h2><a href="http://jsfiddle.net/danield770/epfqjtft/4/">Attempt #1</a></h2>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    width: 200px;
    height: 50px;
    border: 1px solid green;
    overflow: hidden;
    white-space: noWrap;
  }
  span {
    height: 50px;
    display: inline-block;
  }
  .child1 {
    background: aqua;
    float: right;
    width: 50px;
    margin-right: -50px;
    transition: margin .2s;
  }
  .container:hover .child1 {
    margin-right: 0;
  }
  .child2 {
    background: tomato;
    //width: 100%;  
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;span class="child1"&gt;Fixed&lt;/span&gt;
    &lt;span class="child2"&gt;Dynamic Width&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
    &lt;span class="child1"&gt;Fixed&lt;/span&gt;
    &lt;span class="child2"&gt;Here is a Dynamic Width box&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Condition a) Succeeds but condition b) Fails</p>
  
  <h2><a href="http://jsfiddle.net/danield770/epfqjtft/5/">Attempt #2</a></h2>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    width: 200px;
    height: 50px;
    border: 1px solid green;
    overflow: hidden;
    white-space: noWrap;
  }
  span {
    height: 50px;
    display: inline-block;
  }
  .child2 {
    background: aqua;
    width: 50px;
    margin: 0;
    float: right;
    margin-right: -50px;
    transition: margin .2s;
  }
  .container:hover .child1 {
    margin-left: -50px;
  }
  .container:hover .child2 {
    margin: 0;
  }
  .child1 {
    background: tomato;
    transition: margin .2s;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;span class="child1"&gt;Dynamic Width&lt;/span&gt;
    &lt;span class="child2"&gt;Fixed&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
  
    &lt;span class="child1"&gt;Here is a Dynamic Width box&lt;/span&gt;
    &lt;span class="child2"&gt;Fixed&lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Condition a) Fails and condition b) Succeeds</p>
  
  <p>Can both conditions be fulfilled with CSS alone? </p>
  
  <p>PS: The markup which I provided in the demos may be modified. Also CSS3 including flexbox is also fine.</p>