[css] Align text to the bottom of a div

I tried to align my text to the bottom of a div from other posts and answers in Stack Overflow I learned to handle this with different CSS properties. But I can't get it done. Basically my HTML code is like this:

<div style='height:200px; float:left; border:1px solid #ff0000; position:relative;'>_x000D_
  <span style='position:absolute; bottom:0px;'>A Text</span>_x000D_
</div>

The effect is that in FF I just get vertical line (the div in a collapsed way) and the text is written next to it. How can I prevent the div collapsing but having the width fitting to the text?

You now can do this with Flexbox justify-content: flex-end now:

div {_x000D_
  display: flex;_x000D_
  justify-content: flex-end;_x000D_
  align-items: flex-end;_x000D_
  width: 150px;_x000D_
  height: 150px;_x000D_
  border: solid 1px red;_x000D_
}_x000D_
  

<div>_x000D_
  Something to align_x000D_
</div>

Consult your Caniuse to see if Flexbox is right for you.