List item position for responsive webdesign - html

Question

I'd like to create a list that looks good on every devices.
The image shows what I want to achieve.
My first problem is that the description is under the image.
The second one is that the image isn't centered on mobile device.
Thanks for helping me in advance.
Here is my code:
.title {
margin: 0;
}
.tabpage-list {
padding: 0;
width: 100%;
}
.tabpage-list {
display: inline;
}
.tabpage-list-item {
margin-top: 1em;
padding: 1em;
background-color: #f5f5f5;
}
.tli-image-container {
height: 100%;
margin-right: 1%;
float: left;
}
#media screen and (max-width : 480px) {
.tli-image-container {
float: none;
text-align: center;
}
}
And the HTML
<div>
<ul class="tabpage-list">
<li>
<div class="tabpage-list-item">
<div class="tli-image-container">
<img src="http://im10.trueachievements.com/imagestore/0001319900/1319949.jpg" />
</div>
<div>
<p class="title">some title</p>
<a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer velit augue, porttitor in neque vitae, sodales commodo ligula. Pellentesque massa urna, sagittis nec ullamcorper vitae, pharetra a elit. Nullam eu lectus vel justo interdum elementum non faucibus lacus. Vivamus placerat, augue vel egestas rutrum, eros nisi mattis arcu, quis cursus mi leo quis est. Sed nulla quam, mollis vel elit ac, varius gravida felis. Donec elementum felis at lacus eleifend, a placerat eros auctor. Proin laoreet ornare nisl, blandit lobortis ipsum porttitor ac. Ut elit dolor, egestas vitae est nec, tristique adipiscing lorem. Pellentesque lacinia justo et nisl fermentum molestie quis et est. Proin at volutpat dui, vel sollicitudin turpis. Sed eu placerat lectus. Aenean dictum lacinia eros, vitae consequat nisl. Ut vitae nisi ut nulla mattis ultrices non quis felis. Proin vestibulum sit amet nunc sit amet volutpat.</a>
</div>
</div>
</li>
<li>
<div class="tabpage-list-item">
<div class="tli-image-container">
<img src="http://im10.trueachievements.com/imagestore/0001319900/1319949.jpg" />
</div>
<div>
<p class="title">some title</p>
<a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer velit augue, porttitor in neque vitae, sodales commodo ligula. Pellentesque massa urna, sagittis nec ullamcorper vitae, pharetra a elit. Nullam eu lectus vel justo interdum elementum non faucibus lacus. Vivamus placerat, augue vel egestas rutrum, eros nisi mattis arcu, quis cursus mi leo quis est. Sed nulla quam, mollis vel elit ac, varius gravida felis. Donec elementum felis at lacus eleifend, a placerat eros auctor. Proin laoreet ornare nisl, blandit lobortis ipsum porttitor ac. Ut elit dolor, egestas vitae est nec, tristique adipiscing lorem. Pellentesque lacinia justo et nisl fermentum molestie quis et est. Proin at volutpat dui, vel sollicitudin turpis. Sed eu placerat lectus. Aenean dictum lacinia eros, vitae consequat nisl. Ut vitae nisi ut nulla mattis ultrices non quis felis. Proin vestibulum sit amet nunc sit amet volutpat.</a>
</div>
</div>
<li>
</ul>
</div>

Answer 1

I think you were looking for: width:calc(100% - px); to keep the ratio of the image. Also, it was quicker to rewrite the code based your wireframes. http://jsfiddle.net/NinoLopezWeb/twq87mj9/