title: align divs to the right side of the window in react
body: <p>so i created these 4 divs:</p>
  
  <p>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.</p>
  
  <p>card.js:</p>
  
  <pre><code>import React from 'react';
  import '../Card/Card.css'
  
  function card ({title,value,subValue,date}) {
      return (
          &lt;div&gt;
              &lt;div className="title"&gt;
              {title}
              &lt;/div&gt;
              &lt;div className="value"&gt;
              {value}
              &lt;/div&gt;
              &lt;div className="sub-value"&gt;
              {subValue}
              &lt;/div&gt;
              &lt;div  className="date"&gt;
              {date}
              &lt;/div&gt;
          &lt;/div&gt;  
      )
  }
  
  export default card;
  </code></pre>
  
  <p>overview.js:</p>
  
  <pre><code>import React from 'react';
  import Card from '../../components/widgets/Card/Card';
  import '../../pages/Overview/Overview.css';
  
  const Overview = (props) =&gt; {
  
      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 =&gt; {
              return (
                      &lt;div  className="cards"&gt;
                          &lt;Card
                          title={measurment.title} 
                          value={measurment.value}
                          subValue={measurment.subValue}
                          date={measurment.date}
                          /&gt;
                      &lt;/div&gt;        
                      )
                  }
          )
      )
  }
  export default Overview;
  </code></pre>
  
  <p>css code:</p>
  
  <pre><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;
  }
  </code></pre>
  
  <p>my code: <a href="https://codesandbox.io/live/wp9QOw" rel="nofollow noreferrer">https://codesandbox.io/live/wp9QOw</a></p>