Div don't fill up full height of th selector

Question

I have in React Table few columns in mobile version and I noticed that in header some children which is styled div is not always filling-up it's parent from height perspective. Parent is fully and properly filled by its children only for the column which has the biggest header div and let's say drives the height of the all headers, in this app it's second column. But all other headers children have height as big as they need, they don't go fully with parent, due to that I cannot place filter icon properly for them.

This is how styled th is coded:

export const StyledTableHeader = styled.th<{ isSorted: boolean }>`
    width: 1%;
    padding: 0 20px;
    font-size: 11px;
    color: ${({ isSorted, theme }) => isSorted && theme.palette.primary.main};

    &.collapse {
        width: 0.1%;
    }
    white-space: nowrap;
`;

And here is styled div which is the wrapper of single header:

export const StyledHeaderWrapperMobile = styled.div`
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    height: 100%;
`;

My intention is to have filter icon 2px margin from the bottom of the header.

Appreciate Your advice how to code it to position properly.