I have reviewed similar questions on this matter, but none of them seem to provide a solution for the issue I am facing. Currently, my goal is to display a stylized list, but I am encountering more difficulties than expected.
You can find a fiddle linked here. Essentially, I want the text snippet to be displayed next to the image.
Below is the template HTML being utilized (Mako):
% for datum in data.entries:
<a href="#">
<div class="result-container">
<div class="result-header">
<h1 class="result-title">${datum.data['display_name']}</h1>
</div>
<div class="result-body">
<div class="thumbnail-wrapper">
<div class="result-thumbnail">
<img class="thumbnail" src="${datum.thumbnail}" alt="${datum.data['display_name']}"></img>
</div>
</div>
<div class="result-snippets">
<div class="snippet">
${datum.snippets}
</div>
</div>
</div>
</div>
</a>
% endfor
EDIT:
I realize that my explanation may not have been clear enough, so please refer to the updated fiddle and comments. Each of these elements is within a LIST, meaning they will appear multiple times down the page. I am seeking a solution that works consistently for every list item.
How can I position the snippet to the right of the image? Alternatively, why does it currently appear as it does?