Два divs с динамической шириной вместе

Question

Я пытаюсь создать заголовок с поисковым вводом и именем пользователя рядом друг с другом. Поскольку имя пользователя может быть очень длинным, вход поиска должен варьироваться в зависимости от ширины (а также от имени пользователя). Как на картинке ниже:

<div class="container"> 
    <div class="left" style="width: 80%">DYNAMIC WIDTH - search input</div> 
    <div class="right" style="width: 20%">SHORT NAME</div> 
</div> 

codepen является here.

Я устанавливаю там ширину вручную (80% и 20%, или 70% и 30%), я хочу, чтобы она динамически менялась в зависимости от длины имени, и оба div должны составлять 100%.

Это выглядит очень просто, но я не могу придумать, как это сделать. Спасибо за любую помощь!

Answer 1

Это проще установить их в качестве display: table-cell элементов, так как клетки регулировать их ширину, чтобы соответствовать родителя.

Если вы установите left дел до width: 100% он всегда будет оставшееся пространство, оставленное right DIV:

http://jsfiddle.net/fzmj5q2r/

.container { 
    display: table; 
    width: 100%; 
} 

.left { 
    display: table-cell; 
    width: 100%; 
    background: red; 
} 

.right { 
    display: table-cell; 
    background: green; 
    white-space: nowrap; 
} 

Answer 2

Вы пробовали устанавливать поля на авто? Как так:

<div style="margin-left:auto; margin-right: auto;">Sample Text</div> 

Answer 3

http://codepen.io/stephenbe/pen/KhDJw

Все, что я сделал, есть обертка, внутри ввода и имя ... имя над входным текстом

Скажи мне, если это решение, которое работает для вас

.name { 
    position:absolute; 
    right:0; 
    top:0; 
    height:100%; 
    background:red; 

    padding:20px; 
    vertical-align:middle; 

    box-sizing:border-box; 

}