Javascript CSS-如何在行内表单/输入中使用适当的缩进来堆叠每一行？

这是我目前的布局，我很难同时对齐和正确居中

所需输出：

 Username: [Input]

 Password: [Input]

但也希望用户名，密码是正确的缩进和输入排队，以及彼此

我知道那里有教程，但似乎可以让它专门用于我的代码。请参阅下面的代码

@font-face{
字体系列：“Billabong”；
字体风格：普通；
字体大小：正常；
src:url（'/instagram clone/fonts/Billabong.woff'）格式（'woff'）；
}
身体{
显示：块；
边框：1px纯黑；
填充：0px；
边际：0px；
高度：自动；
}
.标题容器{
边框：1px纯黑；
填充：0px；
宽度：400px；
高度：40px；
文本对齐：居中；
边界半径：4px；
颜色：白色；
字体系列：Billabong；
字体大小：16px；
线高：5px；
背景：线性梯度（176度，rgba（43104140,1）0%，rgba（28,97138,1）100%）；
保证金：0自动；
利润率最高：10%；
}
.输入容器{
边框：1px纯黑；
宽度：400px；
高度：200px；
保证金：-2px自动；
边界半径：4px；
}
.登录{
边框：1px纯黑；
}

一款图片分享应用
用户名：
密码：

。登录标签{
显示：内联块；
宽度：75px；
}

用户名：
密码：

有什么原因不能将每个标签/输入对包装在一个div中吗？好的，这是一个开始-如何开始格式化缩进？这就是我要研究的地方我通常对这种布局所做的是使标签显示：inline block，然后在两者上设置相同的宽度。你可以用CSS网格做更复杂的事情，但是对于这个用例来说，这太过分了。我添加了一个非常简单的答案来演示。谢谢-所以当我通过上面的代码时。用户名、UserInput和密码、PWInput在单独的块上。如果单击“运行代码片段”，您将看到它按预期工作，因此我猜想页面或页面样式中的某些内容正在影响它。