align divs to the right side of the window in react

Question

so i created these 4 divs:

they are currently vertically aligned to the left side, i want them to be horizontally aligned next to each others and to the right side of the window. what i tried is adding inline flex but i want the width of the div to be static so it didn't work and also i tried float right but the order of the divs was messed up so i tried to reverse order but also didn't work.

card.js:

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

function card ({title,value,subValue,date}) {
    return (
        <div>
            <div className="title">
            {title}
            </div>
            <div className="value">
            {value}
            </div>
            <div className="sub-value">
            {subValue}
            </div>
            <div  className="date">
            {date}
            </div>
        </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 = [{ title: "Last Blood Pressure", value: "90/60",subValue:"85 BPM",date:"05/14/2020 04:12"},
    { title: "Last Body Weight", value: "154",subValue:"13% Fat",date:"05/14/2020 04:12"},
    { title: "Last SpO2", value: "98%",subValue:"85 BPM",date:"05/14/2020 04:12"},
    { title: "Last Glucose", value: "200",subValue:" ",date:"05/14/2020 04:12"}
]

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

css code:

.cards{
    margin:1em;
    cursor:pointer;
    height: 120px;
    width:180px;
    border-radius: 10px;
    background-color:white;
    border:1px solid #57c0e8;
    padding-left: 0.4rem;
    padding-top: 0.3rem;
}

.card-element{
    color: lightslategray;
}

.title {
    color:grey;
    font-size: 12px;
    text-align: left;
}

.value{
    font-size: 32px;
    text-align: center;
}

.sub-value {
    text-align: right;
    margin-right: 10px;
}

.date {
    color:lightslategrey;
    text-align: right;
    margin-right: 10px;
    font-size: 11px;
    display: flexbox;
    margin-bottom: 0px;
}

my code: https://codesandbox.io/live/wp9QOw

Answer 1

Try using this:

import React from "react";
import Card from "../Card/card";
import "../components/Overview.css";

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

  return(
    <div style={{display: 'flex', justifyContent:'flex-end'}}>
      {
        measurment.map(measurment => {
          return (
            <div className="cards">
              <Card
                title={measurment.title}
                value={measurment.value}
                subValue={measurment.subValue}
                date={measurment.date}
              />
            </div>
          );
        })
      }
    </div>
  )
};
export default Overview;

Answer 2

You can assign a className to your parent div and use flexbox.