css让两个div各自在两边的样式

最近做了一个工作就是统一下各个业务模块的样式，表单上的两个模块一个在左边一个在右边，并且是自适应的缩放时，不会换行变位置。
之前都是使用的elementUI上的<el-row>和<el-col :span='12'>这种方式实现的，但是发现没有办法可以实现右边对齐的，只能左边对齐，现在要求都在一行上面。这是我改造之前的截图

这是我改造之后的，要求两个模块，一个是左对齐，一个是右对齐。

话不多说，上代码，当做笔记，以后工作中遇到时，一个后端调css方便参考

使用原始的<div>嵌套的模式来实现

<div class ="state-label">
<!--模块一(靠左边的)-->
<div>

</div>
<!--模块二(靠左边的)-->
<div>

</div>

</div>
<style lang="scss">
.state-label {
    display: flex;
    justify-content: space-between;
  }
</style>