JSFiddle - React, Tailwind, and code Playground

HTML

<div class="photos">
      <div class="photo-row">
          <div class="photo-wrapper">
            <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" alt=""></a>
          </div>
<div class="photo-wrapper">
            <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" alt=""></a>
          </div><div class="photo-wrapper">
            <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" alt=""></a>
          </div>
            </div><div class="photo-row">
          <div class="photo-wrapper">
            <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" alt=""></a>
          </div><div class="photo-wrapper">
            <a class="fancybox" rel="group" href=""><img class="pending-photo" src="http://blog.blogcatalog.com/wp-content/uploads/mario-300x300.jpg" alt=""></a>
          </div>
          
      </div>
    </div>

CSS

.photos {
  display: flex;
  flex-direction: column;
  border: 10px solid goldenrod;
  justify-content: space-between;
}

.photo-row {
  border: 5px solid red;
  display: flex;
  
}

.photo-wrapper {
  border: 5px solid greenyellow;
  margin-right: 20px; 
  max-width:calc(33.3333% - 20px);
  box-sizing:border-box;
}
.photo-wrapper:last-child {
    margin-right: 0px;
}

.pending-photo {
  width: 100%;
}