Align two overlapping divs to bottom of their parent

Question

I'm struggling to align two divs to the bottom of their parent.

• White (class="section") is parent div, it's 100% wide;
• Gray (class="text") is 100% wide and can have random height depending on contents, it can have smaller height than white and orange, its bottom must be aligned with the bottom of white;
• Orange (class="icon") has fixed width and height, its bottom must be aligned with the bottom of white and it should be pulled to the right (maybe with some offset from the right), the height of white must adapt to be not less than height of orange.

I tried different combinations of vertical-align: bottom, position: absolute and float but to no avail.

JSFiddle: https://jsfiddle.net/ca9we2jo/

What I want it to look like:

Answer 1

You need to make sure that when you set the position of the div .icon, you declare a position for its parent div. When setting position values for an element, it calculates its position relative to the next immediate parent div that has a position declared. If .section has no position set, then .icon will calculate its position relative to .container (if container has position set).

<div class="container">
  <div class="section">
    <div class="text">
      <b>Case 1:</b>
      Gray has lower height than orange
    </div>
    <div class="icon">
    </div>
  </div>
  <div class="section">
    <div class="text tall">
      <b>Case 2:</b>
      Gray has bigger height than orange
    </div>
    <div class="icon">
    </div>
  </div>
</div>



body {
    background-color: #333333;
    margin: 0;
}
.container {
    margin: 0 auto;
    width: 80%;
}
.section {
    position:relative;
    background-color: #FFFFFF;
    min-height: 200px;
    margin-bottom: 200px;
    width: 100%;
}
.text {
    background-color: #999999;
    height: 100px;
    width: 100%;
    text-align: right;
    position:absolute;
    left:0;
    bottom:0;
}
.tall {
    height: 300px;
}
.icon {
    width: 250px;
    height: 250px;
    background-color: #FF9933;
    border: #000000 2px dashed;
    z-index: 1;
    position: absolute;
    right:0;
    bottom:0;
}

Answer 2

You can use css flex to achieve it as follows:

body {
  background-color: #333333;
  margin: 0;
}
.container {
  margin: 0 auto;
  width: 80%;
}
.section {
  background-color: #FFFFFF;
  min-height: 200px;
  margin-bottom: 100px;
  flex-direction: column-reverse;
  position: relative;
  display: flex;
  width: 100%;
}
.text {
  background-color: #999999;
  padding-right: 270px;
  height: 150px;
}
.tall {
  height: 300px;
}
.icon {
  width: 250px;
  height: 250px;
  background-color: #FF9933;
  border: #000000 2px dashed;
  z-index: 1;
  position: absolute;
  bottom: 0;
  right: 0;
}

<div class="container">
  <div class="section">
    <div class="text">
      <b>Case 1:</b>
      Gray has lower height than orange
    </div>
    <div class="icon">
    </div>
  </div>
  <div class="section">
    <div class="text tall">
      <b>Case 2:</b>
      Gray has bigger height than orange
    </div>
    <div class="icon">
    </div>
  </div>
</div>