Html 如何对齐单选按钮和标签？

我正在设计集成到第三方系统的样式，需要格式化一些单选按钮。供应商向我们提供以下HTML：

<span class="radiocontainer">
    <label for="genderMale" class="radiolabel">Male</label>
    <input class="selector" id="genderMale" name="Gender" type="radio" value="2">
    <label for="genderFemale" class="radiolabel">Female</label>
    <input class="selector" id="genderFemale" name="Gender" type="radio" value="1">
</span>

男性
女性

我在这里是在黑暗中拍摄的，但是请注释掉您所有的代码并尝试一下

label{float:right; width:calc(100% - 30px);}

.radiocontainer标签{float:右；宽度：calc（100%-30px）；}

男性
女性

您可以按每个输入和标签的硬编码顺序向左移动输入

.radiocontainer{
显示：内联flex；
柔性包装：包装；
对齐项目：居中；
}
.无线电容器输入，
.无线电容器标签{
宽度：50%；
保证金：0；
}
输入：第n个类型（1）{顺序：1}
输入：第n个类型（2）{顺序：3}
标签：第n个类型（1）{顺序：2}
标签：第n个类型（2）{顺序：4}

男性
女性

CSS网格 这里最合适的方法是。下面的方法使用现代语法，但不支持IE/Edge

.radiocontainer{
显示：内联网格；
/*告诉自动放置算法，如果稍后出现较小的项目，则尝试在网格中更早地填充孔*/
网格自动流动：稠密；
对齐项目：居中；
}
.无线电容器标签{
网格柱：2；
}

男性
女性

您能否发布一个可运行的代码片段，其中包含您的想法？可能与已编辑的“我的答案”重复，以添加对IE10+/Edge的网格支持并删除冗余样式。