Flexbox在同一行问题中对齐div

Question

我正在尝试使用flexbox在卡组件的同一行中对齐一个卡片头和一个图标菜单，由于某种原因它不起作用，我错过了什么？ 我不断得到的结果： 我的css：

.flexItem {
  margin:  6px;
  flex:1;
  font-size: 2em;
  width: 90vw;
  display: flex;
  justify-content: flex-end;
}

.cardFlexContainer {
  display: flex;
  width: 90vw;
  border:1px solid tomato;
}


.cardFlexItem {
  flex:1;
}

.cardFlexItem1 {
  width: 60vw;
  display: flex;
  border:1px solid blue;
}

.cardFlexItem2 {
  width:10vw;
   display: flex;
  justify-content: flex-end;
   border:1px solid green;
}

我的组件代码：

    <div className = {`${flexItem}`}>
<Card className = {`${cardFlexContainer}`}>
<div className = {`${cardFlexItem} ${cardFlexItem1}`}>
  <CardHeader
    title= {props.prize.title}
    subtitle = {props.prize.details}/>
    </div>
<div className = {`${cardFlexItem} ${cardFlexItem2}`}>
    {rightIconMenu}
    </div>
</Card>
</div>