无法使用弹性框获得 div 右对齐

Question

我继承了我所欣赏的非常混乱的模态和形式，为了这个问题的目的，我将其剥离为最基本的结构。

我一直在看各种 Flexbox 教程和关于 S.O. 的问题，但是到目前为止，我还没有找到正确的注释和复选框的合理性，这看起来是一项简单的任务。

<div id="flexTest-modal" class="modal-fade-flexTestModal" data-keyboard="false" tabindex="-1" data-backdrop="static" role="dialog" aria-hidden="false" aria-labelledby="flexTest-modal-title" aria-describedby="flexTest-modal-content">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body pull-left" id="flexTest-modal-content">
<div class="form-body">
<form method="POST" id="flexTestForm" action="${SampleAction}">
<ol class="nobullet">
<li><label class="label flexTestOption" for="${TestValue}"><input type="radio" name="RadioInputName" value="${TestValue}" id="${TestValue}" />    Test Value</label></li>
</ol>
<div class="to-right-justify" id="right-justified-id">
<h5 for="flexTestNotes">Notes</h5>
<label class="switch" class="pull-right"><input type="checkbox" id="togBtn" class="right-block"><div class="slider round" ><span class="on">On</span><span class="off">Off</span></div></label>
</div>
</div>
<div class="modal-footer">
</div>
</form>
</div>
</div>
</div>
</div>
.form-body {
display: flex;
flex-direction: row;
}
.to-right-justify  {
justify-content: space-between;
float: right;
}

JSFiddle： https://jsfiddle.net/kilo1981/qzhofsdk/25/

我需要列表项："测试值"保持对齐(当前正常(。但是，我需要与列表项处于同一级别的"注释"标题，仅右对齐，以及"注释"标题下方的开/关复选框。

Answer 1

form {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.to-right-justify {
justify-content: space-between;
float: right;
}

<div id="flexTest-modal" class="modal-fade-flexTestModal" data-keyboard="false" tabindex="-1" data-backdrop="static" role="dialog" aria-hidden="false" aria-labelledby="flexTest-modal-title" aria-describedby="flexTest-modal-content">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body pull-left" id="flexTest-modal-content">
<form method="POST" id="flexTestForm" action="${SampleAction}">
<ol class="nobullet">
<li><label class="label flexTestOption" for="${TestValue}"><input type="radio" name="RadioInputName" value="${TestValue}" id="${TestValue}" />    Test Value</label></li>
</ol>
<div class="to-right-justify" id="right-justified-id">
<h5 for="flexTestNotes">Notes</h5>
<label class="switch" class="pull-right"><input type="checkbox" id="togBtn" class="right-block"><div class="slider round" ><span class="on">On</span><span class="off">Off</span></div></label>
</div>
<div class="modal-footer">
</div>
</form>
</div>
</div>
</div>
</div>