floating with both sides aligned

For work, I was tasked with making a prototype that looked like the illustration. For the small thumbnails, I was pretty happy floating them:
  .smallpanel {
    width:50%;
    float: left;
  }

But they images were nestled up to each other, with no margin - but if I added a margin, then one side or the other might not line up with fullsize image above!

This seemed to work well:
  .smallpanel {
    width:49%;
    float: left;
  }

  .smallpanel:nth-of-type(even) {
    float: right;
  }

I guess the even tricker case of 3 images with the same kind of alignment might use the nth-child pseduoselector, something like nth-child(3n+1).

(Note that this is somewhat easier if you're using box-sizing: border-box;)

Followup: I should get more fluent with flexbox, "justify-content: space-between;" might about what I'm looking for and works for larger numbers of boxes (After checking in with Can I Use...) - see a working Codepen (inspired by this coworker's)