How to display <figure> images on same line HTML/CSS

Question

I have 4 images within elements with captions within elements.

Each image is displayed under each other like:

IMAGE
caption

IMAGE
caption

IMAGE
caption

IMAGE
caption

I would like the images to appear like:

IMAGE IMAGE IMAGE IMAGE
caption caption caption caption

My HTML:

<div id="earlylife_images">
            <figure>
                <img src="images/early/moore01.jpg" alt="Roger Moore Teenage" width="150" height="150">
                <figcaption>A young Roger Moore</figcaption>
            </figure>

            <figure>
                <img src="images/early/moore02.jpg" alt="Roger Moore 30's" width="150" height="150">
                <figcaption>Roger Moore in his 30's</figcaption>                    
            </figure>

            <figure>
                <img src="images/early/moore03.jpg" alt="Roger Moore as James Bond" width="150" height="150">
                <figcaption>Roger Moore as James Bond</figcaption>
            </figure>

            <figure>
                <img src="images/early/moore04.jpg" alt="Roger Moore Recent" width="150" height="150">
                <figcaption>Roger Moore in more recent years</figcaption>               
            </figure>

            </div>  

Answer 1

Make figure inline-block.

figure { 
    display: inline-block;
}