title: I want to be able to stack my element, side by side and top position like checkered board, right now they stack on top of each other
body: <p>I I want to be able to stack my element, side by side and  top position like checkered board, right now they stack on top of each other. I was under the impression, that with the current code I have, I was able to achieve this.</p>
  <p>Currently it is like this
  <a href="https://i.stack.imgur.com/BwD3W.png" rel="nofollow noreferrer">Problem</a>
  <a href="https://i.stack.imgur.com/BwD3W.png" rel="nofollow noreferrer">1</a>: <a href="https://i.stack.imgur.com/BwD3W.png" rel="nofollow noreferrer">https://i.stack.imgur.com/BwD3W.png</a></p>
  <p>I want to achieve something like this:
  <a href="https://i.stack.imgur.com/RXH2c.png" rel="nofollow noreferrer">Solution</a></p>
  <p>My current code is:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState, useEffect } from 'react';
  import { motion } from 'framer-motion';
  import { images } from '../../constants';
  
  import './About.scss';
  
  const abouts = [
    { title: 'Cloud and DevOps Engineer', description: 'I am a professional DevOps Engineer', imgUrl: images.about01},
    { title: 'Front End', description: 'I am an excellent Front End Developer', imgUrl: images.about02},
    { title: 'Automation Engineer', description: 'I like automating infrastructure, development and database(ETL) tasks', imgUrl: images.about03},
    { title: 'Automation Engineer', description: 'I like automating infrastructure, development and database(ETL) tasks', imgUrl: images.about03},
  ]
  
  const About = () =&gt; {
    return (
      &lt;&gt;
        &lt;h2 className="head-text"&gt; I know that  &lt;span&gt; Good Solutions &lt;/span&gt; &lt;br /&gt; means &lt;span&gt; Good Business &lt;/span&gt;&lt;/h2&gt;
        &lt;div className="app__profile"&gt;
            {abouts.map((about, index) =&gt; (
              &lt;motion.div
              
                whileInView={{ opacity: 1 }}
                whileHover={{ scale: 1.1 }}
                transition={{ duration: 0.5, type: 'tween'}}
                className="app__profile-item"
                key={about.title + index}
              
              &gt;
                &lt;img src={about.imgUrl} alt={about.title} /&gt;
                &lt;h2 className="bold-text" style={{ marginTop: 20 }}&gt;{about.title}&lt;/h2&gt;
                &lt;p className="p-text" style={{ marginTop: 20 }}&gt;{about.description}&lt;/p&gt;
  
              &lt;/motion.div&gt;
            ))}
        &lt;/div&gt;
      &lt;/&gt;
    )
  }
  
  export default About</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.app__about {
      flex: 1;
      width: 100%;
      flex-direction: column;
    }
    
    .app__profiles {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-wrap: wrap;
      margin-top: 2rem;
    }
    
    .app__profile-item {
      width: 190px;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-direction: column;
      margin: 2rem;
    
      img {
        width: 100%;
        height: 170px;
        border-radius: 15px;
        object-fit: cover;
      }
    
      @media screen and (min-width: 2000px) {
        width: 370px;
        margin: 2rem 4rem;
    
        img {
          height: 320px;
        }
      }
    }</code></pre>
  </div>
  </div>
  </p>
  <pre><code>enter code here
  </code></pre>
  <p>Any help would be appreciated</p>