Html 如何移动复选框&；标签位于卡的右侧

我正在尝试将卡中包含复选框和标签的div移动到卡的右侧

到目前为止，它只停留在左边。我已经尝试过多次“float:right”，无论位置是否为绝对位置，我只设法将标签而不是复选框移到右侧。我正在使用引导，并尝试在类中添加文本，正如预期的那样，它只移动了标签

如何将div中的标签和复选框移动到卡的右侧

<div style="position:absolute;"class="text-right boxes">
    <input type="checkbox" id="box-2">
    <label for="box-2">On/Off</label>
</div>

开/关

标签，输入{
浮动：对；
利润率最高：10%；}
div{
宽度：80%；}

开/关

定位元素的方法很多。我更喜欢

flexbox

.box{
显示器：flex；
证明内容：柔性端；
宽度：250px；
边框：黑色虚线1px；
}

开/关