Putting Cards (card reveal) side by side in Html or Css

Question

I need a little help with my html code.

I cant seem to find the reason why my two cards are not wanting to be side by side in my page. I want at the same time to make the two cards be able to resize themselves according to my page's size.

I have done it in the past but with different type of cards from materialize.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css"  />

<div class="row">
  <div class="card blue-grey darken-1">
    <div class="card-image waves-effect waves-block waves-light">
      <img class="activator" src="/Users/sarahgarson/Downloads/WhatsApp Image 2024-03-15 at 18.03.28 (1).jpeg" />
    </div>
    <div class="card-content">
      <span class="card-title activator white-text">Full-Stack Development Course<i class="material-icons right"
              >more_vert</i
            ></span
          >
        </div>
        <div class="card-reveal">
          <span class="card-title grey-text text-darken-4"
            >A little bit about my Full-Stack Development Course:<i
              class="material-icons right"
              >close</i
            ></span
          >
          <p>
            (just to make the code shorter here...)
          </p>
          <p>
            (just to make the code shorter here...)
          </p>
        </div>
      </div>

      <div class="card blue-grey darken-1">
        <div class="card-image waves-effect waves-block waves-light">
          <img
            class="activator"
            src="/Users/sarahgarson/Downloads/WhatsApp Image 2024-03-15 at 23.03.21.jpeg"
          />
        </div>
        <div class="card-content">
          <span class="card-title activator white-text"
            >Mechanical Engineering Course<i class="material-icons right"
              >more_vert</i
            ></span
          >
        </div>
        <div class="card-reveal">
          <span class="card-title grey-text text-darken-4"
            >A little bit about my Mechanical Engineering Course:<i
              class="material-icons right"
              >close</i
            ></span
          >
          <p>
            (just to make the code shorter here...)
          </p>
          <p>
           (just to make the code shorter here...)
          </p>
        </div>
      </div>
    </div>

Answer 1

Heyyy.

Found a solution by just adding <div class="col s12 m6"> under the class="row" in each card's code.

Had to set my width in CSS to 1000 px to make the cards size reasonable since it became super small once I added the code above, but it did put the two cards side by side and it still resized both when in a smaller page. :)

Anyways I would love to know if anyone had other ways of doing so please haha