Align image and 2 text lines - html

Question

I'm trying to align this div so that the image appear first and then the 2 lines after, however i cant seem to make it align proberly.
#overview {
width: 350px;
height: 500px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#overview #header-collapse {
height: 50px;
width: 100%;
background-color: #ff8217;
color: #fff;
font-size: 15px;
line-height: 50px;
white-space: nowrap;
-moz-border-radius: 0px;
-webkit-border-radius: 3px 3px 0px 0px;
border-radius: 3px 3px 0px 0px;
text-align: center;
}
#overview #body-list {
background: #fff;
height:450px;
overflow-y: auto;
width: 100%;
border-radius: 0px 0px 3px 3px;
-webkit-border-radius: 0px 0px 3px 3px;
border-radius: 0px 0px 3px 3px;
}
#overview #body-list a {
text-decoration:none;
}
.list-item:hover {
background-color: rgba(82, 82, 82, .1);
}
.list-item {
border-bottom: 1px solid rgba(82, 82, 82, .2);
height: 80px;
width: 100%;
padding-left: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.list-item p {
margin: 0px;
}
.list-item #header-title {
color: #954500;
font-size: 20px;
font-weight: 400;
}
.list-item #subtitle {
color: rgb(82, 82, 82);
opacity: 0.6;
font-size: 13px;
}
.list-item #list-image {
height: 60px;
width: 60px;
background-color: #000;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
<div id="overview">
<div id="header-collapse">
<h4>
Oversigt
</h4>
</div>
<div id="body-list">
<a href="#">
<div class="list-item">
<div id="list-image"></div>
<p id="header-title">Title</p>
<p id="subtitle">Subtitle</p>
</div>
</a>
</div>
</div>

Answer 1

The easiest, and most modern way is to use flexbox.
With this method, the image circle and the text will both be centered vertically, so you don't have to worry about it later.
Place your header-title and subtitle inside of a div.
<div class="list-titles">
<p id="header-title">Title</p>
<p id="subtitle">Subtitle</p>
</div>
Then add the following to your .list-item class:
.list-item {
display: flex;
align-items: center;
}
(I also added margin-right: 10px; to your image so it looks better xD)
Here is a working JSFiddle

Answer 2

Add float:left to that div.
.list-item #list-image {float:left;}
Working JSFIDDLE

Answer 3

Wrap the two titles in a new DIV, then define that new DIV and the DIV of the image as inline-blocks, like this: (you'll have to finetune the margins for distances)
#overview {
width: 350px;
height: 500px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#overview #header-collapse {
height: 50px;
width: 100%;
background-color: #ff8217;
color: #fff;
font-size: 15px;
line-height: 50px;
white-space: nowrap;
-moz-border-radius: 0px;
-webkit-border-radius: 3px 3px 0px 0px;
border-radius: 3px 3px 0px 0px;
text-align: center;
}
#overview #body-list {
background: #fff;
height:450px;
overflow-y: auto;
width: 100%;
border-radius: 0px 0px 3px 3px;
-webkit-border-radius: 0px 0px 3px 3px;
border-radius: 0px 0px 3px 3px;
}
#overview #body-list a {
text-decoration:none;
}
.list-item:hover {
background-color: rgba(82, 82, 82, .1);
}
.list-item {
border-bottom: 1px solid rgba(82, 82, 82, .2);
height: 80px;
width: 100%;
padding-left: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.list-item p {
margin: 0px;
}
.list-item #header-title {
color: #954500;
font-size: 20px;
font-weight: 400;
}
.list-item #subtitle {
color: rgb(82, 82, 82);
opacity: 0.6;
font-size: 13px;
}
.list-item #list-image {
height: 60px;
width: 60px;
background-color: #000;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
#list-image, #title-wrapper {
display: inline-block;
}
<div id="overview">
<div id="header-collapse">
<h4>
Oversigt
</h4>
</div>
<div id="body-list">
<a href="#">
<div class="list-item">
<div id="list-image"></div>
<div id="title-wrapper">
<p id="header-title">Title</p>
<p id="subtitle">Subtitle</p>
</div>
</div>
</a>
</div>
</div>