如何在react中水平对齐2行？

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

const App = () => {
  return (
    <div className="container">
      <div className="row">
        <div className="item">第一行文本</div>
        <div className="item">第二行文本</div>
      </div>
    </div>
  );
};

export default App;

.container {
  display: flex;
  justify-content: center;
}

.row {
  display: flex;
}

.item {
  margin: 0 10px;
}

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

const App = () => {
  return (
    <div className="container">
      <div className="row">
        <div className="item">第一行文本</div>
        <div className="item">第二行文本</div>
      </div>
    </div>
  );
};

export default App;

.container {
  display: grid;
  place-items: center;
}

.row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}