Issues with flex-box

Question

So I have a question about flexbox. Basically, I'm creating a card component. I'd like the image on the left and the card body on the right. I have it.. Sort of.

The problem is the card is bigger than the image. I'd like the card to stay the height of the image.

Here is my code:

.card-horizontal {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.card-horizontal__image {
  width: 100%;
  max-width: 100%;
  background-position: center;
}

.card-horizonal__body{
  display: flex;
  flex-direction: column;
  background: white;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  padding: 15px 20px;
}

<div class='st-grid-12'>
  <div class='card-horizontal'>
    <div class='card-horizontal__imgage'>
      <img alt='' src='https://source.unsplash.com/random/400x400'>
    </div>
    <div class='card-horizonal__body'>
      <h2>This is a title</h2>
      <p class='card__copy'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis velit accusamus non numquam assumenda quaerat, consequatur recusandae facilis inventore dicta, distinctio magni obcaecati vel aliquid, fugit maxime. Voluptas, ullam officiis?</p>
      <div class='btn btn--secondary'>Read More</div>
    </div>
  </div>
</div>

Answer 1

First, you had a typo in your class, And second you had a misuse of your display: flex

Here is your css now

  .card-horizontal {
    display: flex;
    flex-direction: row;
    width: 100%;
    border: 1px solid red;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  }

  .card-horizontal__imgage {
    max-width: 100%;
    background-position: center;  
    display: flex;  
  }

  .card-horizonal__body {
    display: flex;
    flex-direction: column;
    background: white;
    padding: 15px 20px;
  }

I'm sure you can tell why I did that border and commented the shadow. To show you they're truly equal in size.

here is the code working

  .card-horizontal {
    display: flex;
    flex-direction: row;
    width: 100%;
    border: 1px solid red;
  }

  .card-horizontal__imgage {
    max-width: 100%;
    background-position: center;  
    display: flex;  
  }

  .card-horizonal__body {
    display: flex;
    flex-direction: column;
    background: white;
  /*   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); */
    padding: 15px 20px;
  }

<div class='st-grid-12'>
  <div class='card-horizontal'>
    <div class='card-horizontal__imgage'>
      <img alt='' src='https://source.unsplash.com/random/400x400'>
    </div>
    <div class='card-horizonal__body'>
      <h2>This is a title</h2>
      <p class='card__copy'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis velit accusamus non numquam assumenda quaerat, consequatur recusandae facilis inventore dicta, distinctio magni obcaecati vel aliquid, fugit maxime. Voluptas, ullam officiis?</p>
      <div class='btn btn--secondary'>Read More</div>
    </div>
  </div>
</div>

EDIT

To ease the worries about the shadow, I added the shadow to the entire card, which is how it should be done anyway. You can't count the shadow as height. Shadows are CSS embellishments, like an outline for example. It doesn't add size to the item even if it appears that way....Checking the browser dev tool will answer some of these questions.