Digital Cards showing vertical instead if horizontal

Question

I'm trying to get the cards below to show up horizontally but they keep showing vertically. I have no idea how to change this. I've tried several different things but either the content inside the card moves or just nothing happens. And it's not because of the window size.

These look a lot better (https://codepen.io/defaydesigns/pen/dKNxGj) but the original had too much code that I had to streamline.)

.blog, button {
  font-family: Rockwell;
}
.blogCard {
 max-width: 300px;
 height: 250px;
 border: 2px solid #a81e36;
 border-radius: 20px;
 -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -khtml-border-radius: 10px;
 box-shadow: 0px 0px 10px #a81e36;
 -moz-box-shadow: 0px 0px 10px #a81e36;
 -webkit-box-shadow: 0px 0px 10px #a81e36;
 margin: 5%;
}

  <div class="blog">
    <div class="blogCard">
    <div class="blogTitle">
    <h1>RANT 1</h1>
    </div>
    <div class="blogSummary">
    Lorem ipsum dolor sit amet, vix vivendum scribentur ad, eu nullam tempor graeco mel.
    </div>
    
   <center><button class="blogButton">
    READ MORE &rarr;
    </button></center>
   </div>
    <div class="blogCard">
    <div class="blogTitle">
    <h1>RANT 1</h1>
    </div>
    <div class="blogSummary">
    Lorem ipsum dolor sit amet, vix vivendum scribentur ad, eu nullam tempor graeco mel.
    </div>
    
   <center><button class="blogButton">
    READ MORE &rarr;
    </button></center>
   </div>
    </div>

Answer 1

You can use display property in css

.blogCard{
  display: inline-flex;
}