Two floating columns with dynamic width

Hey, everyone. I'd like to share with you pure CSS implementation for making two floating columns both dynamic width.

This way is very usefull for full-width forms that has internalization labels/text/value of their components.

So, first of all, let's make some basic markup for this:

<div class="b-content -highlighted -box-sized">
        <form class="b-form">
            <div class="b-form-element--right">
                <button class="f-item b-button -decorated">Send code</button>
            </div>
            <div class="b-form-element">
                <input class="f-item b-text -masked" id="key-ltr" name="key-ltr" type="text"/>
                <label class="f-item-label" for="key-ltr">
                    <span class="tooltip-ltr" title="You can find it out on the product box..">Example: A4AJU-STXNS-1JXTR-VG6XP</span>
                </label>
            </div>
        </form>
    </div>

The idea is to put button to right side and other available space use for text input.

So let's make css magick :)

.b-content {
    width: 100%;
}

.b-form {
    width: 50%;
    overflow: hidden;
    margin: 0 auto;
}

.b-form-element {
    overflow: hidden;
}

.b-form-element input {
    width: 100%;
}

.b-form-element--right {
    float: right;
    padding: 0 0 0 15px;
}

.f-item {
    padding: 5px 10px 5px 10px;
    line-height: 25px;
}

.f-item-label {
    display: block;
    margin: 5px 0 5px 0;
}

.f-item-label span {
    color: #006d55;
    border-bottom: 1px #006d55 dashed;
    cursor: pointer;
}

The whole magick is going throught these two selectors:

.b-form-element {
    overflow: hidden;
}

.b-form-element--right {
    float: right;
    padding: 0 0 0 15px;
}

So, this is it. You can look at the whole example
here.