Css 如何在一行中为小屏幕制作元素？

我有两个要素：

  <span>ddd:</span>
                            <input type="text" class="ui-state-disabled" name="textinput-hide" id="textinput1" placeholder="Text input" value="">

ddd：

更新

以下是我的HTML代码：

<div data-role="page" id="layerProperty">
    <div data-role="header" data-position="fixed" data-theme="b">
        <h1 id="layers property"></h1>
        <a href="#mapPage" data-mini="true" data-icon="arrow-l">back</a>
    </div>

    <div data-role="content">
        <div id="vectorLayerProperties" style="display: none;">
            <fieldset style="border: solid 1px #6b6b6b;">
                <legend>data1</legend>
                <div class="ui-content">
                    <form>
                        <div>
                            <span>ddd:</span>
                            <input type="text" class="ui-state-disabled" name="textinput-hide" id="textinput1" placeholder="Text input" value="">

                            <span>ddd:</span>
                            <input type="text" class="ui-state-disabled" name="textinput-hide" id="textinput2" placeholder="Text input" value="">

                            <span>ddd:</span>
                            <select class="ui-state-disabled" name="select-native-1" id="select-native-1">
                                <option value="1">The 1st Option</option>
                                <option value="2">The 2nd Option</option>
                                <option value="3">The 3rd Option</option>
                                <option value="4">The 4th Option</option>
                            </select>

                            <span>ddd:</span>
                            <select class="ui-state-disabled" name="select-native-1" id="select-native-2">
                                <option value="1">The 1st Option</option>
                                <option value="2">The 2nd Option</option>
                                <option value="3">The 3rd Option</option>
                                <option value="4">The 4th Option</option>
                            </select>
                        </div>

                        <input type="Button" data-inline="true" value="Edit" onclick="editLayerProperty()">
                        <input type="Button" data-inline="true" value="Delete">
                    </form>
                </div>
            </fieldset>
        </div>
        <div id="vectorLayerslist"></div>
    </div>
</div>

数据1
ddd：
ddd：
ddd：
第一种选择
第二种选择
第三种选择
第四种选择
ddd：
第一种选择
第二种选择
第三种选择
第四种选择

在id=vectorLayerProperties的元素内部，我有span元素和textbox，我想在单行中创建它们

我怎样才能使他们在一行的屏幕大小为250px的宽度

像示例一样使用媒体和显示块，要复制它，您必须将浏览器窗口的大小调整为250px

---

更新

包装您的跨度和输入，在div内，默认情况下，div具有显示块

@介质（最大宽度：250px）{
.span、.input{
显示：块；
}
}

ddd：
数据1
ddd：
ddd：
ddd：
第一种选择
第二种选择
第三种选择
第四种选择
ddd：
第一种选择
第二种选择
第三种选择
第四种选择

将它们包装在一个div中并设置display:inline flex默认情况下它们显示在一行上。你们想让他们各自在自己的一排吗？伦佐，谢谢你们的帖子。我尝试过你们的解决方案，但我不能让它工作。请看我的更新。