How to put multiple images of variable widths into one row and make it responsive?

I have 4 images showing up in a row as shown below. The images are of variable widths. The image list is randomly generated so I can't predict their widths. But I need to put all of them into one single row. Even in smaller devices it should be in one row. How can I do this?

<div class="relatedphotos">
  <a href="/photos/natural-wonders-of-world-26051931">
    <div class="relatedphoto">
      <img src="/store/photos/thpubs/thumb_26051931-img_05_l.jpg" alt="Thumb 26051931 img 05 l">
      <p>Natural Wonders of World</p>
    </div>
  </a>
  <a href="/photos/natural-wonders-of-world-35991100">
    <div class="relatedphoto">
      <img src="/store/photos/thpubs/thumb_35991100-wallhaven-65322.jpg" alt="Thumb 35991100 wallhaven 65322">
      <p>Natural Wonders of World</p>
    </div>
  </a>
  <a href="/photos/natural-wonders-of-world-84217069">
    <div class="relatedphoto">
      <img src="/store/photos/thpubs/thumb_84217069-20140929_170747.jpg" alt="Thumb 84217069 20140929 170747">
      <p>Natural Wonders of World</p>
    </div>
  </a>
  <a href="/photos/natural-wonders-of-world-18133515">
    <div class="relatedphoto">
      <img src="/store/photos/thpubs/thumb_18133515-wallhaven-141502.jpg" alt="Thumb 18133515 wallhaven 141502">
      <p>Natural Wonders of World</p>
    </div>
  </a>
</div>

Here's the CSS :

.relatedphotos {
    width: 100%;
    white-space: nowrap;
    display: table;
    .relatedphoto {
        max-width: 100%;
        background-color: #FFFFFF;
        padding: 5px;
        border: 1px solid #DDDDDD;
        margin-left: 2px;
        margin-right: 2px;
        -webkit-box-shadow: 0 7px 5px -7px #ADADAD;
        -moz-box-shadow: 0 7px 5px -7px #ADADAD;
        box-shadow: 0 7px 5px -7px #ADADAD;
        vertical-align: middle;
        display: table-cell;
        float: left;
        p {
            margin-top: 5px;
            margin-bottom: 0px;
            text-align: center;
            color: #808080;
            font-size: 12px;
        }
    }
}