Html 标签和单选按钮轻微错位，如何修复？

我对编码还很陌生，目前正在进行响应式网页设计认证。我正处于一个项目中，创建一个具有基本HTML和CSS的调查窗体，并且必须实现一个无线电部分。 问题是无线电输入和标签只是稍微错位，这让我发疯。通过调整单选按钮的高度，我可以让它们看起来像是在一条直线上，但这永远都不正确。我试过填充、边距、线条高度和大量的谷歌搜索，但都没有用。我甚至尝试切换到css网格，但这只会带来更多问题。我确信解决方案非常简单，我会很生气，但请帮助一个初露头角的程序员：）

以下是代码笔的链接：

Html:

单选按钮及其标签稍微错位

试试这个

移除

填充底部

.radio-labels{
  padding-bottom:2px;
}

添加此样式

input[type = "radio"]{
  display: inline-block;
  vertical-align: bottom;
}


输入{
宽度：90%；
高度：25px；
左边距：20px；
边框宽度：1px；
左侧填充：5px；
}
#无线电容器{
显示器：flex；
弯曲方向：立柱；
对齐项目：开始；
}
.无线电标签{
高度：自动；
}
输入[type=“radio”]{
宽度：自动；
高度：20px；
左边距：20px；
显示：内联块；
垂直对齐：底部对齐；
}
#无线电问题{
边缘顶部：20px；
边缘底部：10px；
}
你会向朋友推荐freeCodeCamp吗
肯定
大概
不确定
试试这个

移除
填充底部

.radio-labels{
  padding-bottom:2px;
}

添加此样式

input[type = "radio"]{
  display: inline-block;
  vertical-align: bottom;
}


输入{
宽度：90%；
高度：25px；
左边距：20px；
边框宽度：1px；
左侧填充：5px；
}
#无线电容器{
显示器：flex；
弯曲方向：立柱；
对齐项目：开始；
}
.无线电标签{
高度：自动；
}
输入[type=“radio”]{
宽度：自动；
高度：20px；
左边距：20px；
显示：内联块；
垂直对齐：底部对齐；
}
#无线电问题{
边缘顶部：20px；
边缘底部：10px；
}
你会向朋友推荐freeCodeCamp吗
肯定
大概
不确定