如何在HTML/CSS中制作"不可丢弃的组"？

Question

是否可以使用CSS在HTML /中创建"不可丢弃的组"？例如,如果我有一个像这样的简单元素:

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

给定足够的大小(宽度),它将呈现如下:

但是如果宽度变得太小,Item标签和标签TextBox将会"掉落"在Name标签下面,如下所示:

是否可以创建行为,当宽度较小时,文本框大小将被调整,但标签将保留在文本框的左侧和右侧而不是"丢弃"？

例证:

On large screen:
Name: |                       |Item

On small screen:
Name: |                 |Item

如果必须使用Javascript,我也可以使用建议的答案Javascript.

Answer 1

也许你可以使用媒体查询：

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