Гистограмма CSS – очень простая

У меня есть очень простой код, и он работает, за исключением того, что все выравнивается по верху... в идеале полосы должны выравниваться по низу. Я полагаю, что мог бы использовать фиксированное позиционирование, так как размеры в квадрате 50 на 50 пикселей, но я бы предпочел что-то менее «фиксированное».

      <div style="border: 1px solid #aeaeae; background-color: #eaeaea; width: 50px; height: 50px;">
        <div style="position: relative; bottom: 0; float: left; width: 8px; height: 22px; background-color: #aeaeae; margin: 1px;"></div>
        <div style="position: relative; bottom: 0; float: left; width: 8px; height: 11px; background-color: #aeaeae; margin: 1px;"></div>
        <div style="position: relative; bottom: 0; float: left; width: 8px; height: 6px; background-color: #aeaeae; margin: 1px;"></div>
        <div style="position: relative; bottom: 0; float: left; width: 8px; height: 49px; background-color: #aeaeae; margin: 1px;"></div>
        <div style="position: relative; bottom: 0; float: left; width: 8px; height: 28px; background-color: #aeaeae; margin: 1px;"></div>
      </div>

Я не хочу использовать библиотеку или надстройку JS. Сохранение этого легкого веса имеет решающее значение.

Также я бы предпочел, чтобы полосы были вертикальными. Кто-нибудь из гуру CSS хочет пролить немного света, которого мне, кажется, не хватает? Я гуглил, и большинство примеров слишком сложные/замысловатые,