Jak najlepiej ustawić avatar w jednej lini z tytułem

Question

Witam. Mam takie coś https://codepen.io/KingShadow/pen/GRoxVrZ. Chciałbym żeby avatar był w jednej lini z tytułem tak jak to ma miejsce na youtube. Jak to najlepiej zrobić żeby to wszystko ładnie się układało? 
Zdjęcie dla przykładu:

Kod:

<ul class="card-list">
	<li class="card">
    	<a href="">
		<img class="card-image" src="https://m.fotoblogia.pl/dsc-0164-jpg-025d34878bd571ea931,910,500,0,0.jpg" alt="Psychopomp" />
			<a class="card-description">
            	<img class="card-avatar" 	src="https://i.pinimg.com/originals/bd/71/46/bd7146bb7f82b89c3a39489e44b36941.jpg" alt="Avatar" />
			     <h2>Lorem Ipsum is simply dummy text of the printing</h2>
			     <p>Lorem Ipsum has been the industry's</p>
            </a>
         </a>
	</li>
	<li class="card">
    	<a href="">
		<img class="card-image" src="https://m.fotoblogia.pl/dsc-0164-jpg-025d34878bd571ea931,910,500,0,0.jpg" alt="Psychopomp" />
			<a class="card-description">
            	<img class="card-avatar" 	src="https://i.pinimg.com/originals/bd/71/46/bd7146bb7f82b89c3a39489e44b36941.jpg" alt="Avatar" />
			     <h2>Lorem Ipsum is simply dummy text of the printing</h2>
			     <p>Lorem Ipsum has been the industry's</p>
            </a>
         </a>
	</li>
</ul>

.card-list {
	display: block;
	padding: 0;
	font-size: 0;
  list-style: none;
  text-align: center;
}

.card {
	display: inline-block;
	width: 90%;
	max-width: 26rem;
	margin: 0.9rem;
	font-size: 1rem;
	text-decoration: none;
	box-shadow: 0 0 3rem -1rem rgba(0,0,0,0.5);
	transition: transform 0.1s ease-in-out, box-shadow 0.1s;
}

.card-image {
	display: block;
	min-height: 15rem; /* layout hack */
	background: #fff center center no-repeat;
  width: 100%;
  max-width: 500px;
  height: 210px;
  margin: 0 auto;
  display: block;
  border: solid 1px #ccc;
}

.card-description {
  text-align: left;
	display: block;
	padding: 1em 0.5em;
	color: #515151;
  text-decoration: none;
}

.card-description > h2 {
  margin: 0 0 0.5em;
  height: 35px;
}

.card-description > p {
	margin: 0;
}

.card-avatar {
  width: 32px;
  height: 32px;
}

Z góry bardzo dziękuję za pomoc :) 

Answer 1

.card-description {
	display: flex;
         ....
}

 

Answer 2

Pod tym linkiem człowiek ustawia m. In. Obrazek obok tekstu. Wygląda to podobnie jak chcesz zrobić.

https://youtu.be/wLHhaMgAdPY

Float: left; z tego co pamiętam