How to avoid text go below the thumbnail with css - css

Question

I have posts list with thumbnails.
I'm trying to prevent the title from going under the image.
I tried white-space: normal but it didn't effect the text here. I also tried float: left and Display:inline nothing helped to keep the title beside the image.
CODE CSS&HTML:
ul{
list-style-type:none;
padding:0;
background-color:white;
}
li{
border: 1px solid gray;
width: 325px;
border-bottom:1px solid #border-color;
padding:10px;
white-space: normal;
}
img{
width:80px;
height:80px;
}
.post-title{
display: inline-block;
margin-left:5px;
vertical-align: middle;
}
.post-title a{
white-space: normal;
color:#breadcrumbs-current-color;
}
.post-title p{
margin-bottom:0;
color:gray;
font-size:11px;
}
<ul>
<li>
<a><img src="http://blog.room34.com/wp-content/uploads/underdog/logo.thumbnail.png"/ ></a>
<div class="post-title">
<a>Street Dance Moves Comically Illustrated
<p>200 view</p>
</a>
</div>
</li>
<li>
<a><img src="http://www.ionnic.com/media/catalog/product/cache/1/thumbnail/80x80/9df78eab33525d08d6e5fb8d27136e95/b/e/becable.png"/></a>
<div class="post-title">
<a>Hello World
<p>80 view</p>
</a>
</div>
</li>
</ul>

Answer 1

One quick solution is to use max-width and remove vertical-align:
ul {
list-style-type: none;
padding: 0;
background-color: white;
}
li {
border: 1px solid gray;
width: 325px;
border-bottom: 1px solid#border-color;
padding: 10px;
white-space: normal;
}
img {
width: 80px;
height: 80px;
}
.post-title {
display: inline-block;
margin-left: 5px;
max-width: 200px;
}
.post-title a {
white-space: normal;
color: #breadcrumbs-current-color;
}
.post-title p {
margin-bottom: 0;
color: gray;
font-size: 11px;
}
<ul>
<li>
<a>
<img src="http://blog.room34.com/wp-content/uploads/underdog/logo.thumbnail.png" />
</a>
<div class="post-title">
<a>Street Dance Moves Comically Illustrated
<p>200 view</p>
</a>
</div>
</li>
<li>
<a>
<img src="http://www.ionnic.com/media/catalog/product/cache/1/thumbnail/80x80/9df78eab33525d08d6e5fb8d27136e95/b/e/becable.png" />
</a>
<div class="post-title">
<a>Hello World
<p>80 view</p>
</a>
</div>
</li>
</ul>
But i suggest to go with display: table technique:
ul {
list-style-type: none;
padding: 0;
background-color: white;
}
li {
display: table;
border: 1px solid gray;
width: 325px;
border-bottom: 1px solid#border-color;
padding: 10px;
white-space: normal;
}
img {
width: 80px;
height: 80px;
}
.post-title {
display: table-cell;
margin-left: 5px;
max-width: 200px;
vertical-align: middle;
}
.post-title a {
white-space: normal;
color: #breadcrumbs-current-color;
}
.post-title p {
margin-bottom: 0;
color: gray;
font-size: 11px;
}
li > a {
width: 90px;
display: table-cell;
vertical-align: middle;
}
<ul>
<li>
<a>
<img src="http://blog.room34.com/wp-content/uploads/underdog/logo.thumbnail.png" />
</a>
<div class="post-title">
<a>Street Dance Moves Comically Illustrated
<p>200 view</p>
</a>
</div>
</li>
<li>
<a>
<img src="http://www.ionnic.com/media/catalog/product/cache/1/thumbnail/80x80/9df78eab33525d08d6e5fb8d27136e95/b/e/becable.png" />
</a>
<div class="post-title">
<a>Hello World
<p>80 view</p>
</a>
</div>
</li>
<li>
<a>
<img src="http://www.ionnic.com/media/catalog/product/cache/1/thumbnail/80x80/9df78eab33525d08d6e5fb8d27136e95/b/e/becable.png" />
</a>
<div class="post-title">
<a>Hello World Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello WorldHello World
<p>80 view</p>
</a>
</div>
</li>
</ul>