title: How to display <figure> images on same line HTML/CSS
body: <p>I have 4 images within  elements with captions within  elements. </p>
  
  <p>Each image is displayed under each other like:</p>
  
  <p>IMAGE<br>
  <em>caption</em>  </p>
  
  <p>IMAGE<br>
  <em>caption</em>  </p>
  
  <p>IMAGE<br>
  <em>caption</em>  </p>
  
  <p>IMAGE<br>
  <em>caption</em>  </p>
  
  <p>I would like the images to appear like:  </p>
  
  <p>IMAGE IMAGE  IMAGE  IMAGE<br>
  <em>caption</em> <em>caption</em> <em>caption</em> <em>caption</em></p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div id="earlylife_images"&gt;
              &lt;figure&gt;
                  &lt;img src="images/early/moore01.jpg" alt="Roger Moore Teenage" width="150" height="150"&gt;
                  &lt;figcaption&gt;A young Roger Moore&lt;/figcaption&gt;
              &lt;/figure&gt;
  
              &lt;figure&gt;
                  &lt;img src="images/early/moore02.jpg" alt="Roger Moore 30's" width="150" height="150"&gt;
                  &lt;figcaption&gt;Roger Moore in his 30's&lt;/figcaption&gt;                    
              &lt;/figure&gt;
  
              &lt;figure&gt;
                  &lt;img src="images/early/moore03.jpg" alt="Roger Moore as James Bond" width="150" height="150"&gt;
                  &lt;figcaption&gt;Roger Moore as James Bond&lt;/figcaption&gt;
              &lt;/figure&gt;
  
              &lt;figure&gt;
                  &lt;img src="images/early/moore04.jpg" alt="Roger Moore Recent" width="150" height="150"&gt;
                  &lt;figcaption&gt;Roger Moore in more recent years&lt;/figcaption&gt;               
              &lt;/figure&gt;
  
              &lt;/div&gt;  
  </code></pre>