html css how to arrange images of different sizes

1.flex-container {
2    flex-flow: row;
3    justify-content: space-between;
4    align-items: flex-start; /* should align items to the top of your flex row if they don't reach 100px in height */
5}
6.inner-image {
7    max-height: 100px;
8}
9.inner-image.portrait {
10    height: 200px;
11    width: 100px;
12}
13.inner-image.landscape {
14    height: 100px;
15    width: 200px;
16}