Html 样式化组件垂直居中

我的“第1列文本”无法垂直居中。以下是我的一个例子：

export const MyComponent = () => {
  return (
    <div>
        <ColOneContainer>
          col 1 text
        </ColOneContainer>
        <ColTwoContainer>
          <div>text that might run one line or two</div>
          <div>text that might run one line or two</div>
        </ColTwoContainer>
    </div>
  );
};

const ColOneContainer = styled.div`
  float: left;
  width: 25%;
`

const ColTwoContainer = styled.div`
  margin-left: 25%;
`;

const ColTwoContainer = styled.div`
  margin-left: 25%;
`;

export const MyComponent=（）=>{
返回(
第1栏文本
可能运行一行或两行的文本
可能运行一行或两行的文本
);
};
const ColOneContainer=styled.div`
浮动：左；
宽度：25%；
`
const ColTwoContainer=styled.div`
左边缘：25%；
`;
const ColTwoContainer=styled.div`
左边缘：25%；
`;

其输出如下：

我有多行“MyComponent”，所以我不能使用

position:absolute
有人能帮我将“第1列文本”垂直居中，使其看起来像这样：
您可以尝试使用表格单元格来实现此功能

 const ColOneContainer = styled.div`
      float: left;
      width: 25%
      display: table-cell; 
      vertical-align: middle;
   '
 ;

再看一看
注意，“ColTwoContainer”中的文本可能很长，因此我不能使用“padding top:10rem”，这并没有解决问题。但是感谢howtocentincss网站，非常酷的网站