Css 按第二个元素对齐两个元素行

我有两个元素组成的行，我想通过第二个元素对齐（它们是输入框，让它们垂直排列很好）。我的解决方案完全符合我的要求，当元素适合一条直线时，我不希望使用第一个元素的宽度来设置水平位置。这在小窗口或移动设备上开始表现得很奇怪（当标签的宽度超过屏幕的45%时，它会再次开始包装）

达到同样结果的正确方法是什么

HTML:

---

您可以使用

flex

属性显示行和列，并删除

float

<div class="flex">
    <label>Test</label>
    <input type="number" value="0">
</div>
<div class="flex">
    <label>Test longer</label>
    <input type="number" value="0">
</div>
<div class="flex">
    <label>Test longest text</label>
    <input type="number" value="0">
</div>

---

并对低于200px（或您的首选项）的屏幕使用媒体查询，使文本和输入垂直显示

如果屏幕宽度太小，标签必须包裹，则需要什么输出？

label {
    display: inline-block;
    float: left;
    width: 45%;
    text-align: right;
    padding: 2px;
    margin: 2px;
}
input {
    display: inline-block;
    float: left;
    width: 200px;
    padding: 2px;
    margin: 2px;
}

<div class="flex">
    <label>Test</label>
    <input type="number" value="0">
</div>
<div class="flex">
    <label>Test longer</label>
    <input type="number" value="0">
</div>
<div class="flex">
    <label>Test longest text</label>
    <input type="number" value="0">
</div>

.flex {
    display:flex;
}

label {
    width: 45%;
    text-align: right;
    padding: 2px;
    margin: 2px;
}
input {
    width: 200px;
    padding: 2px;
    margin: 2px;
}

@media(max-width:200px){
    .flex{
        display:block;
    }
}