Javascript 如何使动态组件在高度上匹配，在内容上对齐？

使用ReactJS，我将根据动态值生成组件的内容

我希望距离匹配，而不是像下图那样，当渲染更长的字符串（如上面的文本）时，我的组件高度不相等，下面的文本组件也会向下跳跃：

我现在使用的代码是Rebass来生成两个父列，对于其中组件中的文本，我使用样式化组件，如下所示：

const Title = styled.h1`
font-family: "Raleway", sans-serif;
font-style: slim;
font-weight: 300;
font-size: 1em;
text-align: center;
color: black;
`;

const Text = styled.h6`
font-family: "Raleway", sans-serif;
font-weight: 300;
font-style: thin100;
text-align: justify;
color: black;
`;

并且在render（）中：

{this.props.title}
烹饪：
{this.props.courine.toString（）.replace（/，/g，“”）}

使我的组件对齐的最佳方法是什么？我必须给每个文本元素一个固定的高度吗？如果是这样，最好的方法是什么

---

谢谢

如果您知道永远不会得到三行，您可以将高度固定为与两行匹配的大小。这样，只有一行时，间距将相同

其他的方法是，如果你想保持标题在顶部，底部的笑脸和中间的其他内容，放置“代码>对齐内容：在父元素之间的之间的空间，在屏幕上传播这三种事物。

<Title>{this.props.title}</Title>
<Text>
  <b>Cuisine: </b>
  {this.props.cuisine.toString().replace(/,/g, " ")}
</Text>