CSS - Align div to bottom respective his parent div

Question

I'm trying to align div # alignBottom1 and # alignBottom2 down without removing the float left from the parent div and without using position absolute or margin top.

How can I do?

This is my code:

#TotContainer {
  height: 900px;
}

#container {
  max-height: 90%
}

.col-sm-6 {
  width: 50%;
  float: left;
  height: 100%;
  padding: 10px;
}

.col-sm-12 {
  width: 100%;
  float: left;
  background: yellow;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

<div id="TotContainer">
  <div id="container">
    <div class="col-sm-6" style="background:blue;">XXXXXX</div>
    <div class="col-sm-6" style="background:red;">
      <div id="alignBottom1">Text to align at the bottom 1</div>
      <div id="alignBottom2">Text to align at the bottom 2</div>
    </div>
    <div class="col-sm-12">footer</div>
  </div>
</div>

Thanks for any help!

Answer 1

You can do this easily if you turn the parent container into a flexbox.

In your sample, I gave the parent a height value so that you can see the effect of using flexbox and justifying the content to the end of it's parent.

#alignBottom {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    height: 100px; /* giving the element a height to exaggerate the effect */
}

#TotContainer {
  height: 900px;
}

#container {
  max-height: 90%
}

.col-sm-6 {
  width: 50%;
  float: left;
  height: 100%;
  padding: 10px;
}

.col-sm-12 {
  width: 100%;
  float: left;
  background: yellow;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

<div id="TotContainer">
  <div id="container">
    <div class="col-sm-6" style="background:blue;">XXXXXX</div>
    <div id="alignBottom" class="col-sm-6" style="background:red;">
      <div id="alignBottom1">Text to align at the bottom 1</div>
      <div id="alignBottom2">Text to align at the bottom 2</div>
    </div>
    <div class="col-sm-12">footer</div>
  </div>
</div>