Question: So I have two images with captions under them. I want to be able to put them side by side. I've tried in css float: right; and display: inline-block; but I can't simply get it to work. Please and thank you. I'm new to coding.

```
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
</style>
</head>
<body>
<figure id="crackers1">
  <img src="crackers2.jpg" alt="missing" height="25%" width="25%" />
  <figcaption>Peppermint Thins</figcaption>
  </figure>
   <figure id="crackers2">
  <img src="crackers2.jpg" alt="missing" height="25%" width="25%" />
  <figcaption>Ritz Crackers</figcaption>
  </figure>
 </div>
</body>
</html>

```

Answer: 
`display: inline-block` should do the job. If the two images have different heights, you can add a vertical align.

```
<style>
figure {
    display: inline-block;
    vertical-align: top
}
</style>

```
Write in css style as below..

```
#crackers1,#crackers2 {
 Display:inline-block;
  Width:50%; 
  /* do not write float when using display:inline-block.     */
}

#crackers1 img,#crackers2 img{
   Width:100%;
 }

```

Width:50% would be update as per your requirement.
Hope this is helpful.