How to create multiple row with two columns in React app

Well, in my react app, I want multiple rows having two columns. Just like first pink picture below.

But I am getting it like this. The divs are floating on the left side only, and nothing is working.

I think there should be a solution for using in map method. react component code.

{dog.map((data) => (
      <div key={data.id} className="dogs-list">
        <div id={data.id} className="first-column">
          <img src={dogPic} alt="dog"></img>
          <h3>Dog's Name</h3>
          <h3>{data.name}</h3>
        </div>
      </div>
        ))}

Nothing is working. Can anyone please help?

this is the styling of this area.

.page .dogs-list {
    /* display: flex; */
    color: white;
    width: 100%;
  }

  .page .dogs-list .first-column {
    width: 50%;
    /* border: 2px yellow solid; */
    /* display: flex;
    flex-direction: column; */
    float: right;
  }

  .dogs-list img {
    height: 250px;
    width: 100%;
  }

  .dogs-list h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 10px;
    font-size: 18px;
  }

Looking forward!