How to top-align smaller inline-block elements next to larger elements? - html

Question

How can I top-align inline-block elements? What I mean is how can I make inline-block elements appear aligned from the top of the largest element instead of from the bottom. I have made a fiddle to illustrate it:
https://jsfiddle.net/shzyku6u/
When you expand the window wide enough, the 3 smaller blue images appear inline from the bottom of the larger blue image. I would like them to appear from the top of the large, blue image - if it's possible.
Here is the HTML/CSS from the Fiddle:
.topwrapper {
max-width: 1000px;
text-align: center;
}
.block {
display: inline-block;
width: 400px;
}
.listitem {
display: inline-block;
width: 100px;
}
<div class="topwrapper">
<div class="block">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/480px-000080_Navy_Blue_Square.svg.png" width="400" height="400" class="bigimage">
</div>
<div class="block">
<ul class="list">
<li class="listitem">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/200px-000080_Navy_Blue_Square.svg.png" height="100" width="100">
</li>
<li class="listitem">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/200px-000080_Navy_Blue_Square.svg.png" height="100" width="100">
</li>
<li class="listitem">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/200px-000080_Navy_Blue_Square.svg.png" height="100" width="100">
</li>
</ul>
</div>
</div>

Answer 1

Since both of the .block sibling elements have a display of inline-block, the vertical-align property will be respected. Just add vertical-align: top:
Updated Example
.block {
display: inline-block;
vertical-align: top;
width: 400px;
}