这是wxml：

<view class="container">
  <view class="item1">
    {{'内容一'}}
    <view class="item2">内容二</view>
    <image class="item3" src="/assets/common/more.svg" />
  </view>
</view>

这是wxss：

.container {
  padding: 60rpx 50rpx 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: lightpink;
}

.item1 {
  color: #000;
  font-size: 54rpx;
  font-weight: 500;
  align-self: flex-start;
  width: 100%;
  position: relative;
  background-color: rgb(196, 130, 130);
}

.item2 {
  display: inline-block;
  box-sizing: border-box;
  color: #fff;
  padding: 6rpx 14rpx;
  font-size: 20rpx;
  font-weight: normal;
  border-radius: 20rpx;
  text-align: center;
  line-height: initial;
  margin-left: 16rpx;
}

.item3 {
  transform: rotate(90deg);
  width: 37rpx;
  height: 37rpx;
}

目前效果如图：

想要的效果是把item3右对齐，而item1和item2不变，如图：

请问我该如何实现呢？谢谢！