In the snippet below, the child div is normally positioned until it is :hovered , when it becomes absolutely positioned. The reasoning behind this markup is to simulate a popup style in a limited environment where I can't use a <select> (among other limitations).

When child is hovered, the sibling elements jump around, which is expected, as the contents of the block have changed.

But how can I preserve their positioning? That is, what CSS can I add to prevent the siblings from jumping around when child is hovered.

Javascript is also not allowed, so please no answers using JS.

HTML:

<div class="container">
    <div class="child">
        <span class="d4"></span>
        <label><input type="radio" name="radio" value="1"/>One</label>
        <label><input type="radio" name="radio" value="2"/>Two</label>
    </div>
    <input type="text" name="sibling"/>
    <button name="sibling2">Button</button>
</div>

CSS:

.container, .child, button {
    display:inline-block;
}

.child {
    vertical-align: middle;
    width: 35px;
    height: 35px;
}

.child:hover {
    background: gray;
    position:absolute;
    width: 100px;
    height: auto;
}

.child:hover > .d4 {
    display: none;
}

.child label {
    display:none;
}

.child:hover label {
    display: inline-block;
}

.d4 {
    background-position: -411px -1px;
    width: 35px;
    height: 35px;
    background-image: url("https://i.imgur.com/zkgyBOi.png");
    background-repeat: no-repeat;
    color: transparent;
    display: inline-block;
}

Here's a fiddle: http://jsfiddle.net/cpctZ/1/