Inline-block elements vertically align to bottom (instead of default top) for no apparent reason

Question

On my page, I have a list of elements of different heights set to inline-block with a width of about 33% to have 3 per row. In terms of vertical alignment, they sho

Answer 1

The default value of vertical-align is baseline which is why it's aligning to the bottom. You can change the value with vertical-align: top or other acceptable values

.resource_item {
    display: inline-block;
    vertical-align: top;
}

Acceptable values for vertical-align:

/* keyword values */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* <length> values */
vertical-align: 10em;
vertical-align: 4px;

/* <percentage> values */
vertical-align: 20%;

/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align#Syntax