Is there a way to somehow have both absolute position (bottom) and multiple of the same div side by side?

Question

I am using divs as the bulding block for a sort of column graph. Each div takes up 1% of the screen and there's many of them. I want them to both stick to the bottom of their parent div via bottom: 0px; and somehow have multiple of them side by side using float:left; or display:inline;

I get either this with relative position and float: left; working

-----------------------
|IIIIIIIIIIIIIIIIIIIII|
|                     |
|                     |
|                     |
-----------------------

Or this with absolute position with bottom: 0px; working, of course all my Divs are drawn on top of one another

-----------------------
|                     |
|                     |
|                     |
|I                    |
-----------------------

What I want is to have something like this, so I can then change the sizes of my divs and make my column graph.

-----------------------
|                     |
|                     |
|                     |
|IIIIIIIIIIIIIIIIIIIII|
-----------------------

Which is of course possible via styling them individually, or via JS, and probably what I'll end up doing. But is there a good HTML-CSS-only way of doing this?

.Column {
    float: left;
    position: absolute;
    bottom: 0;
    width: 1%;
}

.Graph {
    position: relative;
    margin: auto;
    width: 80%;
    height: 400px;
    border: 3px solid green;

}

Answer 1

You can use flexbox to achieve this:

.container {
  display:flex;
  height:150px;
  border:1px solid;
  align-items:flex-end;
}
.container > span {
  width:10px;
  height:20px;
  background:red;
  margin:0 5px;
}
.container > span:nth-child(odd) {
  background:blue;
  height:30px;
}

<div class="container">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Or some inline-block tricks:

.container {
  height:150px;
  border:1px solid;
}
.container:before {
  content:"";
  display:inline-block;
  height:100%;
}
.container > span {
  display:inline-block;
  width:10px;
  height:20px;
  background:red;
  margin:0 5px;
}
.container > span:nth-child(odd) {
  background:blue;
  height:30px;
}

<div class="container">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>