Как правильно сверстать карточку?

Question

[MRcracker]

Задача сделать карточку, чтобы слева был текст, а справа был блок, который залит цветом. Залитый цветом блок должен содержать в себе картинку, которая немного выходит из блока.

Проблема в том,что картинка в блоке очень сильно разъезжается в моей верстке. Помогите, исправить.

<div class="card-content">
<div class="card-info">
	<h3 class="card-title">Имя</h3>
	<p class="card-description">Текст</p>
	<div class="card-footer-wrap">
		<div class="card-footer">Текст: <span class="card-span">15</span></div>
	</div>
</div>

<div class="card-img-wrap">
	<img class="card-img card-img_top" src="http://img.ru">
</div>
</div>

.card-content {
  display: flex;
}

.card-info {
  padding: 32px;
}

.card-title {
  color: $main;
  @extend .transition;
  &:hover {
    color: $accent;
  }
}

.card-img-wrap {
  background-color: red;
  @extend .transition;
  &:hover {
    background-color: red;
  }
}

.card-img {
  width: 280px;
  height: 361px;
}

Comments

[Beliyadm]

Песочницу бы сделали. Куда должна выходить картинка? За какие стороны?
Можно, к примеру так сделать https://codepen.io/pen/yLpaKXm