how to make element stick to bottom of sibling?

Question

I have created elements that looks like shown below..

I made the preview above with flexbox like so:

CSS

.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.wrapper * {
  width: 350px;
  margin: 5px;
}
.elem1 {
  background-color: pink;
  height: 100px;
}
.elem2 {
  background-color: teal;
  height: 60px;
}
.elem3 {
  background-color: yellow;
  height: 80px;
}
.elem4 {
  background-color: orange;
  height: 120px;
}

HTML

<div class="wrapper">
  <div class="elem1">
    elem1
  </div>
  <div class="elem2">
    elem2
  </div>
  <div class="elem4">
    elem4
  </div>
  <div class="elem3">
    elem3
  </div>
</div>

is there any way to make the elem3 element to float vertically so that it would stick to the bottom of elem2?

please note that I can't use col-md-xx because then when in responsive mode those elements' flow will become elem1 -> elem4 -> elem2 -> elem3 instead of elem1 -> elem2 -> elem3 ->elem4..

and also, in my real project the height of the elements are not fixed but depends on the content..

any ideas?

and when it comes to mobile view (smaller screen), what is the order? elem 1,2,3,4 OR 1,2,4,3 ? — Gosi, Aug 08 '19 at 08:50
How about `display:flex` and `align-items: end`? Please post your code. — Jax-p, Aug 08 '19 at 08:51
Without seeing any of your code, how can we know what needs to be changed? — Peter B, Aug 08 '19 at 08:53
@Gosi with my current code, when it comes to smaller screen, the order becomes 1,2,4,3 — dapidmini, Aug 08 '19 at 08:58
sorry, I thought the preview and explanation was enough.. I've added my code. — dapidmini, Aug 08 '19 at 08:59
what's the difference with this question: https://stackoverflow.com/q/57345659/8620333 ? — Temani Afif, Aug 08 '19 at 09:23
@TemaniAfif actually the problem is the same.. but since that question have stopped getting answers, I'm posting a new one with what I think is a better explanation and presentation in the hope that there's a different solution from different point of view.. sorry if it's annoying — dapidmini, Aug 08 '19 at 09:26
you can still edit it and you already received and answer and you didn't react with it ... — Temani Afif, Aug 08 '19 at 09:28
oh I didn't know that an edited question will be pushed to the top of the questions in SO.. I thought it will still be down in the list so that less people will notice it. I'll remember it the next time I ask something here. thank you — dapidmini, Aug 08 '19 at 09:31

Gosi · Accepted Answer · 2019-08-08T09:30:35.853

Try grouping elem2 and 3 together. This way you can set your group position as relative and set elem3 as absolute and move it below elem2.

Try this:

.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.wrapper * {
  width: 40%;
  margin: 5px;
}
.elem1 {
  background-color: pink;
  height: 100px;
}
.elem2 {
  background-color: teal;
  height: 60px;
}
.elem3 {
  background-color: yellow;
  height: 80px;
  position: absolute;
  top: 60px;
}
.elem4 {
  background-color: orange;
  height: 120px;
}

.grp-left, .grp-right {
    width: calc(50% - 10px);
    position: relative;
  }
  
 .elem1, .elem2, .elem3, .elem4 {
   width: 100%;
 }
 
@media(min-width:500px){
  .grp-left, .grp-right {
    width: 100%;
  }
}

<div class="wrapper">

   <div class="grp-left">
      <div class="elem1">
        elem1
      </div>
  </div> 
  
  <div class="grp-right">
    <div class="elem2">
      elem2
    </div>
    
    <div class="elem3">
      elem3
    </div>
  </div>
  
  <div class="grp-left">
     <div class="elem4">
       elem4
     </div>
  </div> 
  
</div>

Edit 1: Added media query for screensize 500px.

thanks! it's getting me closer to what I needed. just a couple things.. why aren't the elements being wrapped (moved to a new line) when in smaller screen? and what if the height of the elements are changeable? (elem2 is a collapsible accordion) — dapidmini, Aug 08 '19 at 09:22
Glad it helped man, well the reason why it doesn't fall onto a new line when its smaller is because of the width. Its forever 50%, so you need to do media queries to make it 100%. — Gosi, Aug 08 '19 at 09:26
I've updated my answer, added media query. Test this screen when it reaches 500px, it will now take up 100% width. So using this, you can add more screen sizes. — Gosi, Aug 08 '19 at 09:31

how to make element stick to bottom of sibling?

1 Answers1