flex布局让某个子元素靠右显示

例如图中两个标题需要一个靠左 一个靠右展示

image.png

不用浮动，我用了flex布局，接着左边的字体按照正常写法，想要右边字体靠右显示
方案1：左侧flex设为1 自然将右标题挤到右边。
方案2：:右边字体flex设为1 ，text-alight为right即可

  <style>
    * {
      padding: 0;
      margin: 0;
    }
    .title {
      box-sizing: border-box;
      width: 375px;
      padding: 0 20px;
      height: 50px;
      font-size: 18px;
      display: flex;
      align-items: center;
      background-color: pink;
    }
    .left {
      flex: 1;
    }
  </style>

    <div class="title">
      <p class="left">我是左边标题</p>
      <p>我是右边标题</p>
    </div>