How do I get text to appear below the images in HTML?

I have two images which I have placed side by side on a page (refer to screenshot). I placed the images using a CMS editor (Movable Type). I wanted to place some text below the images, but the text ended up appearing to the right of the images. I had to press a few hard returns to force the text to appear below the images. Here is some of the code for it:
<div>
<form mt:asset-id="10487" class="mt-enclosure mt-enclosure-image" style="display: inline;"><img alt="adlerbombgrovesandoppenheimer.jpg" src="http://www.sonoma.edu/exed/olli/adlerbombgrovesandoppenheimer.jpg" width="205" height="279" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;" /></form></div><div><p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p><p><a href="http://www.uni.edu/exed/olli/docs/course-handouts/fall-2015/adlerbombweek1" target="_blank">Week 1 Handout</a>...</div>


There must be a more elegant way to do this. I would appreciate any suggestions.

Thank you.
ee_osher.jpg