Input type box width should auto scale according to label content

Question

Here is my scenario: This page will be translated into different languages. I want the input type box width should be auto scaled as per translated "search" text without changing CSS / structure.

Answer 1

You need a way for your box model to adapt automatically. Using CSS table layout may serve your purpose.

HTML

<div class="input-row">
    <label for="myInput">Search</label>
    <input id="myInput" type="text" placeholder="text input"/>
</div>

CSS

.input-row {
    display: table;
    width: 100%;
}
.input-row label {
    display: table-cell;
    width:1%;
    white-space:nowrap;
}
.input-row input {
    display: table-cell;
    width:100%;
}

https://jsfiddle.net/836c154c/