Html 如何使行中的所有按钮与具有动态高度的按钮对齐

我在React中的一行按钮上显示来自API的数据。对于其中一个按钮，我将宽度设置为200px。如果数据超过200px限制，则按钮会动态更改高度以适应数据。但是，我的其他按钮与此按钮的高度不对齐。无论是否达到宽度像素限制，如何使所有像素对齐

'& .myLongTextButton': {
  width: '200px'
},
'& .myShortTextButton': {
  width: '50px'
}

<Button className="myLongTextButton">{data.long_text}
</Button>
<Button className="myShortTextButton">{data.short_text}
</Button>

“&.myLongTextButton”：{
宽度：“200px”
},
“&.myShortTextButton”：{
宽度：“50px”
}
{data.long_text}
{data.short_text}

您可以使用flexbox容器包装两个按钮。例如：

'& .container': {
  display: inline-flex;
}
'& .myLongTextButton': {
  width: '200px'
},
'& .myShortTextButton': {
  width: '50px'
}

<div classname="container">
 <Button className="myLongTextButton">{data.long_text}
 </Button>
 <Button className="myShortTextButton">{data.short_text}
 </Button>
</div>

“&.container”：{
显示：内联flex；
}
“&.myLongTextButton”：{
宽度：“200px”
},
“&.myShortTextButton”：{
宽度：“50px”
}
{data.long_text}
{data.short_text}

没有可生产的示例，我们怎么能猜测？我们如何知道

按钮的样式？@bag02832然后向上投票并接受答案