Here is a CSS only solution.

The trick is to use this basic rule:
Consider two or more inline elements rendered side by side.
If you increase the width of the first element, the second elements is pushed to the right.

The problem is that you need the elements to move to the left. I solved this by inverting the X direction to the child elements scaleX(-1) and re-inverting again the container.

To help you better understand this, you can comment out the transform: scaleX(-1); in the jsfiddle link below, and watch what happens.

The beauty of this is that you don’t need to know the width of the .child2. You just need to push it to the left.

.container {
    width: 200px;
    height: 50px;
    border: 1px solid green;
    overflow: hidden;
    white-space: nowrap;
    text-align: right;
    transform: scaleX(-1);
}

span {
   height: 50px;
   display: inline-block;
   transform: scaleX(-1);
}

.child1 {
    background: aqua;
    width: 50px;
    margin-left: -50px;
    float: left;
    transition: margin-left .2s;
    text-align: left;
}

.child2 {
   background: tomato;
}

.container:hover .child1 {
    margin-left: 0;
}

<div class="container">
    <span class="child1">Fixed</span>
    <span class="child2">Dynamic Width</span>
</div>

<div class="container">
    <span class="child1">Fixed</span>
    <span class="child2">Here is a Dynamic Width box</span>
</div>

Also on jsfiddle

Solution 2

Another slightly simpler solution is to use direction: rtl; on the container. By reversing the direction of inline elements from right to left, we achieve the same effect without the need to use CSS3 transformations.
See http://jsfiddle.net/epfqjtft/12/