如何将图标和文本放在同一行

<div class="icon-text-container">
  <i class="icon"></i>
  <span class="text">这是一段文本</span>
</div>

.icon-text-container {
  display: flex;
  align-items: center;
}

.icon {
  margin-right: 10px;
}

import React from 'react';
import './IconText.css';

const IconText = () => {
  return (
    <div className="icon-text-container">
      <i className="icon"></i>
      <span className="text">这是一段文本</span>
    </div>
  );
};

export default IconText;