Jak utworzyć "niezapisaną grupę" w HTML/używając CSS?

Question

Czy można utworzyć "niezapisaną grupę" w HTML/używając CSS? Na przykład, jeśli mam prosty elementem tak:

<div> 
    Name: <input type="text"><span>Item</span> 
</div> 

Zważywszy na tyle wielkość (szerokość), to zostanie wygenerowana tak:

Ale jeśli szerokość staje się zbyt mała, Item etykieta i TextBox będzie „spadł” poniżej etykiety Name jak ten:

Czy można utworzyć takie zachowanie, że gdy szerokość jest mała, rozmiar pola tekstowego zostanie dostosowany, ale etykiety zostaną zachowane po lewej i prawej stronie pola tekstowego zamiast "upuszczenia"?

Obrazowo:

On large screen: 
Name: |      |Item 

On small screen: 
Name: |     |Item 

przypadku musi to być zrobione za pomocą Javascript, jestem ok z sugerowanych odpowiedzi korzystających Javascript też.

Answer 1

Może użytek mediów zapytania:

HTML:

<div class="input-sm"> 
    Name: <input type="text"><span>Item</span> 
</div> 

CSS:

.input-sm input{ 
     width: 50%; 
} 
@media (min-width: 768px) { 
    .input-sm input{ 
     width: 100%; 
    } 
}