html之如何在一行的左右两边添加控件

作为一个初学者，这里记录下
我自己的exe，目前使用lorca的框架在写
遇到的问题是需要将两个控件分别部署在左右两边
我刚开始用了挺多属性，感觉实现的都是奇奇怪怪的，后面换了一个思路
对下图中的checkbox和button使用不同的类
H5代码如下

			<div class="bgDiv">
				<input type="checkbox" style="margin-left:10px"  name="my-checkbox" id="chk">
				<label for="chk" class="fileLabel">FEI</label>
				<div class="r2lDiv">
					<input type="button" value="FEI" class="search-input-button" id="cfg_btn" >
				</div>
			</div>

CSS布局的代码如下：
关键点在于要将button的属性设置成justify-content: flex-end;

		.bgDiv {
			display: flex; 
			align-items: center;
			box-sizing: border-box;
			width: 100%;
			height: 55px;
			position: relative;
			white-space: nowrap;
			flex-direction: row;
			justify-content: center;
    }
	.r2lDiv{
	  display: flex; 
	  align-items: center;
      box-sizing: border-box;
      width: 100%;
      height: 55px;
      position: relative;
	  white-space: nowrap;
	  flex-direction: row;
	  justify-content: flex-end;
	}