title: How to lay 2 images side by side in html?
body: <p>This is my current code:</p>
  
  <pre><code>&lt;figure class="half"&gt;
      &lt;img style="width:400px" src="http://alexmarshall12.github.io/assets/img/colored_1693146.png"&gt;
      &lt;img style="width:600px" src="http://alexmarshall12.github.io/assets/img/one-piece-1693146_colored2.png"&gt;
      &lt;figcaption&gt;Caption describing these two images.&lt;/figcaption&gt;
  &lt;/figure&gt;
  </code></pre>
  
  <p>Unfortunately perhaps because the images are too wide, it still puts the second image on the next line. I want to avoid this - no matter how wide things get. How can I do this? </p>