Html 如何对齐表单，使其看起来像这样？

嘿，所以我正在尝试建立一个电影评论网站，它使用一个数据库（我使用的是PockDB），我想设计我的管理/添加一个评论页面，以便输入和标签都以某种方式对齐。我一直在调整宽度、填充和边距，但我似乎无法使它们对齐。有人能教我如何按照我想要的方式排列吗

这就是我希望他们看起来的样子：

正文{
保证金：0；
字体系列：乔治亚，arial；
背景色：#E0；
文本对齐：居中；
}
.新电影{
文本对齐：左对齐；
显示：内联块；
背景颜色：绿色；
宽度：80%；
填充：20px；
}
标签{
填充：6px；
文本对齐：居中；
背景：红色；
}
.表格{
显示器：flex；
文本对齐：居中；
弯曲方向：立柱；
}
输入{
利润率：10px；
宽度：40%；
背景颜色：黄色；
填充：8px；
边界：2px；
}

创建新评论
标题：
体裁：
图片：
评级：
简介：
拖车：
后评论！

稍微修改了html以添加一些结构。 我不建议使用此代码、查看引导表或类似的内容。它将看起来更好，并且是一个更具可扩展性的解决方案

.newFilm{
背景色：红色；
填充：20px；
边界半径：20px；
}
文本区，
输入，
标签{
显示：块
}
文本区，
输入{
宽度：200px；
}
.表格{
宽度：100%；
}
左边
.对{
宽度：49%；
显示：内联块；
垂直对齐：顶部；
}

创建新评论
标题：
体裁：
图片：
评级：
简介：
拖车：
后评论！

稍微修改了html以添加一些结构。 我不建议使用此代码、查看引导表或类似的内容。它将看起来更好，并且是一个更具可扩展性的解决方案

.newFilm{
背景色：红色；
填充：20px；
边界半径：20px；
}
文本区，
输入，
标签{
显示：块
}
文本区，
输入{
宽度：200px；
}
.表格{
宽度：100%；
}
左边
.对{
宽度：49%；
显示：内联块；
垂直对齐：顶部；
}

创建新评论
标题：
体裁：
图片：
评级：
简介：
拖车：
后评论！

以下是我所做的

正文{
保证金：0；
字体系列：乔治亚，arial；
背景色：#E0；
文本对齐：居中；
}
.新电影{
文本对齐：左对齐；
显示：内联块；
背景颜色：绿色；
宽度：80%；
填充：20px；
}
标签{
填充：6px；
颜色：#fff；
显示：块；
文本对齐：左对齐；
}
.表格{
显示器：flex；
文本对齐：居中；
弯曲方向：立柱；
}
.行{
显示：网格；
网格模板柱：1fr 1fr；
}
上校{
填充：20px；
}
输入，
文本区{
宽度：100%；
显示：块；
背景颜色：黄色；
填充：8px；
边界：2px；
}
#修改胶片按钮{
浮动：对；
}

创建新评论
标题：
图片：
拖车：
评级：
体裁：
简介：
后评论！

以下是我所做的

正文{
保证金：0；
字体系列：乔治亚，arial；
背景色：#E0；
文本对齐：居中；
}
.新电影{
文本对齐：左对齐；
显示：内联块；
背景颜色：绿色；
宽度：80%；
填充：20px；
}
标签{
填充：6px；
颜色：#fff；
显示：块；
文本对齐：左对齐；
}
.表格{
显示器：flex；
文本对齐：居中；
弯曲方向：立柱；
}
.行{
显示：网格；
网格模板柱：1fr 1fr；
}
上校{
填充：20px；
}
输入，
文本区{
宽度：100%；
显示：块；
背景颜色：黄色；
填充：8px；
边界：2px；
}
#修改胶片按钮{
浮动：对；
}

创建新评论
标题：
图片：
拖车：
评级：
体裁：
简介：
后评论！

您可以使用flex或grid，也可以同时使用两者。我用这两个例子。也可以仅使用网格并在网格中嵌套网格

正文{
保证金：0；
字体系列：乔治亚，arial；
背景色：#E0；
文本对齐：居中；
}
.新电影{
背景颜色：绿色；
最大宽度：100%；
填充：10%；
显示：网格；
网格模板柱：1fr 1fr；
栅极间隙：30px；
}
#formTitle{
网格柱：1/3；
}
#修改胶片按钮{
网格柱：2/3；
宽度：50%；
自我辩护：结束；
}
.左{
显示器：flex；
证明内容：中心；
弯曲方向：立柱；
文本对齐：左对齐；
}
.对{
显示器：flex；
弯曲方向：立柱；
文本对齐：左对齐；
}

临时雇员
创建新评论
标题：
图片：
拖车：
评级：
体裁：
简介：
后评论！

您可以使用flex或grid，也可以同时使用两者。我用这两个例子。也可以仅使用网格并在网格中嵌套网格

正文{
保证金：0；
字体系列：乔治亚，arial；
背景色：#E0；
文本对齐：居中；
}
.新电影{
背景颜色：绿色；
最大宽度：100%；
填充：10%；
显示：网格；
网格模板柱：1fr 1fr；
栅极间隙：30px；
}
#formTitle{
网格柱：1/3；
}
#修改胶片按钮{
网格柱：2/3；
宽度：50%；
自我辩护：结束；
}
.左{
显示器：flex；
证明内容：中心；
弯曲方向：立柱；
文本对齐：左对齐；
}
.对{
显示器：flex；
弯曲方向：colu