title: How should i manage them so that they come side by side with equal spacing?
body: <h2>I am using React Bootstrap and displaying my cards dynamically and they seem to want to stack vertically no matter what I try. Here is the component in which they are rendered:</h2>
  <pre><code>import React from 'react'
  import Card from &quot;react-bootstrap/Card&quot;;
  import {Button, Form, FormGroup , Label, Input ,Grid,Col,Row} from 'react-bootstrap'
  import './Cards.css'
   
    const Cards = () =&gt; {
      const cardInfo = [
        {
          image: &quot;https://www.flaticon.com/svg/vstatic/svg/3069/3069358.svg?token=exp=1615897288~hmac=469845378e075208e34824e824d0244d&quot;,
          title: &quot;Lebron James&quot;,
          text: &quot;THE GOAT&quot;,
        },
        {
          image: &quot;https://i.insider.com/50f967f56bb3f7830a000019&quot;,
          title: &quot;Samarth Datir&quot;,
          text: &quot;THE GOAT&quot;,
        }
      ];
  
      const renderCard = (card, index) =&gt; {
        return (
          &lt;contaniner&gt;
          &lt;Row&gt;
            &lt;Col&gt;
   &lt;Card style={{width: &quot;25rem&quot;,flexDirection: 'row',justifyContent: 'right', display: 'flex' ,flex:1}} key={index} className=&quot;box&quot;&gt;
            &lt;Card.Img variant=&quot;top&quot; src=&quot;holder.js/100px180&quot; src={card.image} /&gt;
            &lt;Card.Body&gt;
              &lt;Card.Title&gt;{card.title}&lt;/Card.Title&gt;
              &lt;Card.Text&gt;{card.text}&lt;/Card.Text&gt;
            &lt;/Card.Body&gt;
          &lt;/Card&gt;
          &lt;/Col&gt;
          &lt;/Row&gt;
          &lt;/contaniner&gt;
  
  
        )
      }   
      
    return (
      &lt;div className=&quot;App&quot;&gt;
       {cardInfo.map(renderCard)}
      &lt;/div&gt;
    )
  }
  
  export default Cards;
  </code></pre>
  <hr />
  <hr />
  <p>How should i manage them so that they come side by side with equal spacing</p>