在CSS转换期间，如何将内联块和表格单元元素保持在同一行？

Question

See my codepen: http://codepen.io/maidson/pen/RNQXMb (relevant SCSS at bottom)

HTML

<div class="email">
    <div id="thanks"><span>Thanks!</span></div>
    <input id="text"></input>
    <button id="btn" data-text-swap="OK">
        Stay Informed
    </button>
</div>

SCSS

.email{
    display: table;
    margin: 0 auto;
    width: 400px;
    input, button{
        display: table-cell;
        height: 60px;
    }
    #thanks{
        width:0px;
        @include vendorize(transition, $transition);
        background: #fff;
        color: #000;
        white-space: nowrap;
        overflow-x: hidden;
        height: 60px;
        display: inline-block;
        text-align: center;
        line-height: 60px;
        span{
            margin: 0 auto;
        }
    }
    input{
        width: 0;
        margin-left: 25%;
        @include vendorize(transition, $transition);
        background: #fff;
        color: #000;
    }
    button{
        width: 50%;
        @include vendorize(transition, $transition);
        white-space: nowrap;
    }
}
.email.focus{
    input{
        width: 85%;
        margin-left: 0%;
    }
    button{
        width: 15%;
    }
}
.email.submit{
    #thanks{
        width: 100%;
        background: #ccc;
    }
    input{
        width: 0%;
        margin-left: 100%;
        background-color: #ccc;
    }
    button{
        width: 0%;
    }
}

I have a 2-part animation that I want to guide a user through email registration in a single box. Currently, some js is used to assign class="focus" on first click, and replace that with class="submit" on second click.

I want this entire sequence to remain on a single row, and I want the last transition to wipe left-to-right (after clicking "ok"). Currently, the #thanks div causes the other two elements to spill onto a second row. I want to prevent that from happening while retaining the transition animation.

What am I missing here? Thanks!

Answer 1

At the bottom of your CSS, try changing the margin-left to 0%:

.email.submit{
    #thanks{
        width: 100%;
        background: #ccc;
    }
    input{
        width: 0%;
        margin-left: 0%;
        background-color: #ccc;
    }
    button{
        width: 0%;
    }
}

Answer 2

You can do it by adding positioning -

.email{
    position:relative;
    #thanks{
       position:absolute;
    }
}

Thats it :)