Material-UI List рядом друг с другом React

Question

Я пытаюсь сделать эти списки в пользовательском интерфейсе материала в реакции go рядом. Кто-нибудь может мне помочь?

<Typography><strong>Symptoms</strong></Typography>
        <ul>
            <h5>Common:</h5>
        <ul className="list">
            <li>Fever</li>
            <li>Tiredness</li>
            <li>Dry Cough</li>
        </ul>
        <h5 >Rare:</h5>
        <ul className="list">
            <li>Aches & Pains</li>
            <li>Nasal Congestion</li>
            <li>Runny Nose</li>
            <li>Sore Throat</li>
            <li>Diarrhoea</li>
        </ul>
        </ul>

Answer 1

Вы можете обернуть оба в контейнер Grid и дать каждому списку 6 столбцов

---

<Grid container >
 <Grid item xs={6} >
        <h5>Common:</h5>
    <ul className="list">
        <li>Fever</li>
        <li>Tiredness</li>
        <li>Dry Cough</li>
    </ul>
  </Grid>
 <Grid item xs={6} >
    <h5 >Rare:</h5>
    <ul className="list">
        <li>Aches & Pains</li>
        <li>Nasal Congestion</li>
        <li>Runny Nose</li>
        <li>Sore Throat</li>
        <li>Diarrhoea</li>
    </ul>
    </Grid>
 </Grid>

---

подробнее - https://material-ui.com/components/grid/