Why are my cards stacking on top of each other?

Question

I'm trying to lay cards next to each other but they are stacking on top of each other. The height of the cards div is 1. I have tried changing padding, margin, tried putting height to 100%. I dont know if my navbar is interfering in some way.

<div className="cards">
    <div className="row" style={{ display: "flex" }}>
      <div className="col s6 m4">
        <div className="card">
          <div className="card-image">
            <img
              src="https://media-cdn.tripadvisor.com/media/photo-s/11/4a/54/fe/essence-restaurant.jpg"
              alt="restaurant one"
              width="500px"
              height="200px"
            />
            <span className="card-title">Card Title</span>
          </div>
          <div className="card-content">
            <p>
              I am a very simple card. I am good at containing small bits of
              information. I am convenient because I require little markup
              to use effectively.
            </p>
          </div>
          <div className="card-action">
            <a href="#">This is a link</a>
          </div>
        </div>
      </div>
      <div className="col s6 m4">
        <div className="card">
          <div className="card-image">
            <img
              src="https://media-cdn.tripadvisor.com/media/photo-s/11/4a/54/fe/essence-restaurant.jpg"
              alt="restaurant one"
              width="400px"
              height="200px"
            />
            <span className="card-title">Card Title</span>
          </div>
          <div className="card-content">
            <p>
              I am a very simple card. I am good at containing small bits of
              information. I am convenient because I require little markup
              to use effectively.
            </p>
          </div>
          <div className="card-action">
            <a href="#">This is a link</a>
          </div>
        </div>
      </div>
    </div>
  </div>

Answer 1

add position: relative; to your row class styles.

.row {
  position: relative;
  display: flex;
}

<div className="cards">
    <div class="row" style={ display: flex; position: relative;}>
      <div className="col s6 m4">
        <div className="card">
          <div className="card-image">
            <img
              src="https://media-cdn.tripadvisor.com/media/photo-s/11/4a/54/fe/essence-restaurant.jpg"
              alt="restaurant one"
              width="500px"
              height="200px"
            />
            <span className="card-title">Card Title</span>
          </div>
          <div className="card-content">
            <p>
              I am a very simple card. I am good at containing small bits of
              information. I am convenient because I require little markup
              to use effectively.
            </p>
          </div>
          <div className="card-action">
            <a href="#">This is a link</a>
          </div>
        </div>
      </div>
      <div className="col s6 m4">
        <div className="card">
          <div className="card-image">
            <img
              src="https://media-cdn.tripadvisor.com/media/photo-s/11/4a/54/fe/essence-restaurant.jpg"
              alt="restaurant one"
              width="400px"
              height="200px"
            />
            <span className="card-title">Card Title</span>
          </div>
          <div className="card-content">
            <p>
              I am a very simple card. I am good at containing small bits of
              information. I am convenient because I require little markup
              to use effectively.
            </p>
          </div>
          <div className="card-action">
            <a href="#">This is a link</a>
          </div>
        </div>
      </div>
    </div>
  </div>