How to make "non-droppable group" in HTML / using CSS?

Question

Is it possible to create a "non-droppable group" in HTML / using CSS? For instance, if I have a simple element like this:

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

Given enough size (width), it will be rendered like this:

But if the width becomes too small, the Item label and the TextBox will be "dropped" below the Name label like this:

Is it possible to create behavior such that when the width is small, the text box size will be adjusted but the labels will be retained in the left and right of the text box instead of being "dropped"?

Illustratively:

On large screen:
Name: |                       |Item

On small screen:
Name: |                 |Item

If this must be done using Javascript, I am ok with suggested answers using Javascript too.

Answer 1

Maybe you can use media queries:

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