align divs to the right side of the window in react - css

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.