如何使div内的元素跨多行

Question

所以我只有这些div：

所以基本上，我已经像这样从一个组件到另一个组件创建了这些div，并且我有多个这样的文本，我希望每个组件都跨越多行。例如：第一个div的最后一根血压在另一根线上，最后一根血压为90/60，依此类推我的代码：

card.js：

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


function card ({type,value,subValue,date}) {
    return (
        <div 
        type={type}
        value = {value}
        subValue = {subValue}
        date = {date}
        className={type === "Last Blood Pressure" ? "blood-pressure" : 
        type === "Last Body Weight" ? "Body-Weight":
        type === "Last SpO2" ? "SpO2":
        type === "Last Glucose"?"Glucose":""}
        >
            {type}
            {value}
            {subValue}
            {date}
    </div>  
    )
}
export default card;

overview.js：

import React from 'react';
import Card from '../../components/widgets/Card/Card';
import '../../pages/Overview/Overview.css';

const Overview = (props) => {

    const measurment = [{ type: "Last Blood Pressure", value: "90/60",subValue:"85 BPM",date:"05/14/2020 04:12"},
    { type: "Last Body Weight", value: "154",subValue:"13% Fat",date:"05/14/2020 04:12"},
    { type: "Last SpO2", value: "98%",subValue:"85 BPM",date:"05/14/2020 04:12"},
    { type: "Last Glucose", value: "200",subValue:"",date:"05/14/2020 04:12"}
]

    return (
        measurment.map(measurment => {
            return (
                <div className = "cards">
                        <Card
                        type={measurment.type} 
                        value={measurment.value}
                        subValue={measurment.subValue}
                        date={measurment.date}
                        className={measurment.className}
                        />
                </div>
                    )
                }
        )
    )
}
export default Overview;

overview.css：

.cards{
    margin:1em;
    cursor:pointer;
    height: 90px;
    width:170px;
    border-radius: 10px;
    /* display:inline-block; */
    display: inline-flex;
    background-color:white;
    border:1px solid #57c0e8;
    padding-left: 0.4rem;
    padding-top: 0.3rem;
    font-size: 10px;
    text-align: left;
}

Answer 1

将其他所有内容保持相同，在文本之间添加中断规则，这样就可以正常工作

Answer 2

在paragraph标记下放置要在下一行显示的文本