Blocks side by side above and below

Question

Hello, I’ve been postponing this doubt and leaving aside [...] I look for a simple solution to leave blocks of tables side by side. In this example the blocks start at the bottom edge up with alignment of the block containing 'height' larger. I want you to start from top to bottom, and when there is a block with 'height' larger does not unravel, being aligned to side or bottom in a space of 3px.

<style>
    body{
        background:black;
    }
</style>

<h2>Titulo</h2>
<ul class="galeria">
    <li><div style="position:relative;width:100px; height:100px; background:yellow;"</div></li>
    <li><div style="position:relative;width:100px; height:320px; background:yellow;"</div></li>
    <li><div style="position:relative;width:100px; height:100px; background:yellow;"</div></li>
    <li><div style="position:relative;width:100px; height:100px; background:yellow;"</div></li>
    <li><div style="position:relative;width:100px; height:100px; background:yellow;"</div></li>
</ul>


<style>
.galeria {
    padding-right: 1em;
    text-align: center;
}

.galeria li {
    padding-left: 0.1em;
    padding-right: 0.1em;
    box-sizing: border-box;
    display: inline-block;
    width: 20%;
}
</style>

• A hint already serves ;)

Answer 1

The element <li> the way you graduated with display:inline-block can receive the property vertical-align, then just put vertical-align:top that it will align to the top and not the base of the higher brother. To keep the space between the top element and the bottom line you can use a padding-top as in the code below.

body {
    background: black;
}

.galeria {
    padding-right: 1em;
    text-align: center;
}

.galeria li {
    padding-left: 0.1em;
    padding-right: 0.1em;
    box-sizing: border-box;
    display: inline-block;
    width: 20%;
    vertical-align: top;
padding-top: 10px;
}