How to center three images with captions and descriptions? HTML

I am new to HTML and am trying to create a web page with three centered images (displayed side by side). Here is the code I have:

<center>
<figure style="display:inline-block;text-align:center;top:350px">
    <div style="width:275px; font-size:80%;margin:20px;text-align:center;display:inline-block">
    <img src="images/website-main1.jpg" style="margin-bottom:10px" width="275px" height="175px" />
    <figcaption style="text-align:center">This is an example of a super long caption that will make the images offset</figcaption>
    <div style="text-align:left">
    <p>description example</p>
    </div>
    </div>
    <div style="width:275px; font-size:80%;margin:20px;text-align:center;display:inline-block">
    <img src="images/website-main6_1.jpg" style="margin-bottom:10px" width="275px" height="175px" />
    <figcaption style="text-align:center">First image</figcaption>
    <div style="text-align:left">
    <p>description</p>
    </div>
    </div>
    <div style="width:275px; font-size:80%;margin:20px;text-align:center;display:inline-block;">
    <img src="images/a1_orig.jpg" style="margin-bottom:10px" width="275px" height="175px" />
    <figcaption style="text-align:center">First image</figcaption>
    <p>description</p>
    </div>
</figure>
</center>

This code creates the images and centers them, but if the captions or descriptions are not exactly the same, the images will offset (EX: If the caption on the leftmost image is very wordy, then that image will appear higher than the other two). Is there anyway to fix this?