I try to align content side by side. I tried this solution from the Wordpress forum but it is not working for me: http://wordpress.org/support/topic/how-can-i-display-two-pictures-next-to-each-other
I had to guide a user through this recently, some tricks that I found:
1) Make sure the HTML is clean, that fidding in the visual editor has not added in extra paragraphs or alignments or whatever. In fact, take out all the alignleft etc. you can, get it back to a virgin state.
2) In the visual editor, select the image so it turns blue.
3) Make sure the little mountain icon is displayed on it; if not it means you've got the container selected or something like that, not the image itself
4) Click the align left icon to move the image to the left.
5) If that still doesn't work right, experiment with which image goes first in the HTML; when floating images like this it matters what the sequence is and what is inside what.
At the moment in your HTML it looks like both images are aligned left, resulting in them not being side by side.