Làm cách nào để tạo "nhóm không thể phân đoạn" trong HTML/sử dụng CSS?

Question

Có thể tạo một nhóm "không thể phân tách" trong HTML/sử dụng CSS không? Ví dụ, nếu tôi có một yếu tố đơn giản như thế này:

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

Với đủ kích thước (chiều rộng), nó sẽ được trả lại như thế này:

Nhưng nếu chiều rộng trở nên quá nhỏ, các Item nhãn và TextBox sẽ "rớt" bên dưới nhãn Name như thế này:

Có thể tạo hành vi sao cho khi chiều rộng nhỏ, kích thước hộp văn bản sẽ được điều chỉnh nhưng nhãn sẽ được giữ lại ở bên trái và bên phải của hộp văn bản thay vì bị "bỏ"?

minh họa,:

On large screen: 
Name: |      |Item 

On small screen: 
Name: |     |Item 

Nếu đây phải được thực hiện bằng Javascript, tôi ok với câu trả lời đề nghị sử dụng Javascript quá.

Answer 1

lẽ bạn có thể sử dụng phương tiện truyền thông truy vấn:

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%; 
    } 
}