Editable html combobox. How to set proper width for input

Question

I'm creating a ComboBox with ability to type in it like in a textfield. For that purpose I've used <input type="text"> and <select> with <option> elements.

Found this solution here: Link

The problem is that when I set no width for select it renders as wide as the widest option. That's exactly what I need. But I also have to set some width for text field to fit. How to do it properly?

Here's my code:

JSFiddle

HTML:

<div class="outer">
    <input type="text" class="text-input"/>
    <div class="inner">
        <select class="editable-select">
            <option>One option</option>
            <option>Another</option>
        </select>
    </div>
</div>

CSS:

.outer, .inner {
    position: absolute;
}
.text-input {
    width: 50px;
    height: 17px;
    padding: 0 4px;
    position: absolute;
    top: 1px;
    left: 1px;
    z-index: 2;
    border: none;
}
.editable-select {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

P.S. Don't mind that the value is not set in text field when selected from combobox. It's not the goal here in this question.

Answer 1

This is working well for me, Please try this code. Hope it will resolve your issue.

<div class="outer">
    <input type="text" class="text-input"/>
    <div class="inner">
        <select class="editable-select">
            <option>One option</option>
            <option>Another</option>
        </select>
    </div>
</div>

.outer {
    display:table;
}
.inner {
    display:table-cell;
}
.text-input {
    width: 50px;
    height: 17px;
    padding: 2 4px;
    display:table-cell;
    top: 1px;
    left: 1px;
    z-index: 2;
    border: 1px solid #e7e7e7;
}
.editable-select {
    top: 0px;
    left: 0px;
    z-index: 1;
}