JSFiddle - React, Tailwind, and code Playground

http://stackoverflow.com/questions/29367056/what-is-the-correct-css-width-to-make-sure-these-text-boxes-line-up

by Sanjito Kurniawan

HTML

<div class="container">
    <div>
        <input type="text" id="topTextbox" />
    </div>
    <div class="here">
        <div class='select'>
            <select>
                <option value="0"></option>
                <option value="123456789">123456789</option>
                <option value="123456789123456789">123456789123456789</option>
            </select>
        </div>
        <div class='input'>
            <input type="text" id="bottomTextbox" />
        </div>
    </div>
</div>

<hr></hr>

<button>Add longer option value</button>

SCSS

.container {
    width: 800px;
    //outline: 1px solid #c00;
}

.here {
    display: flex;
    flex-direction: horizontal;
    
    .select { flex-shrink: 0; width: auto; }
    .input { flex-shrink: 1; width: 100%; }
}

select, input { width: 100%; }

JavaScript

var j = 3;

document.querySelector("button").addEventListener("click", function () {
    var opt = document.createElement("option"),
    i;
    for (i = 0; i < j; i += 1) {
        opt.value += "123456789";
        opt.innerHTML += "123456789";
    }
    j += 1;
    document.querySelector("select").appendChild(opt);
});